plugin -- DefinePlugin 注入全局成員 · 前端工程化學習筆記

>[success] # DefinePlugin 注入全局成員 1. `DefinePlugin`允許在編譯時創建配置的全局常量，是一個`webpack`內置的插件（不需要單獨安裝） 2. 在項經常有一個場景需要我們對一些全局通用的變量進行注冊，例如有一個全局的`base_url` 可以利用Webpack 全局提供 3. `DefinePlugin`為代碼注入全局成員，production模式下默認啟動并插`process.env_NODE_ENV`常量 >[info] ## 使用 ~~~ // 單獨使用需要引入webpack插件 const { DefinePlugin } = require("webpack") module.exports = { mode: 'none', entry: './src/main.js', output: { filename: 'bundle.js' }, plugins: [ // 鍵值會被注入代碼中作用注入動態變化值 new DefinePlugin({ // 值要求的是一個代碼片段 JS代碼或者js字符串表現形式"'https://api.example.com'" API_BASE_URL: JSON.stringify('https://api.example.com'), BASE_URL: "'./'" }) ] } ~~~ * 使用 ~~~ // src/main.js console.log(API_BASE_URL) // console.log("https://api.example.com") ~~~ * 編譯template就可以正確的編譯了，會讀取到`BASE_URL`的值 ~~~html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div>  </body> </html> ~~~