4-12 環境變量的使用
- 2020 年 3 月 26 日
- 筆記
1. 簡介
其實我么之前已經將webpack.config.js 按環境進行去了區分配置，那麼在公共配置文件中我們能否知道當前所處的環境，並據此做邏輯區分呢？
2. env
對於 webpack.config.js 來講，除了導出一個對象以外，其實還可以導出一個函數。
// webpack.common.js const path = require('path'); const devConfig = require('./webpack.dev'); const prodConfig = require('./webpack.prod'); const merge = require('webpack-merge'); const commonConfig = { entry: { index: "./src/index.js" }, output: { path: path.resolve(__dirname, '../dist'), filename: "[name].bundle.js", }, module: { rules: [ { test: /.(jpg|jpeg|png|gif)$/, use: { loader: 'url-loader', options: { name: '[name].[ext]', limit: 2048 } } }, { test: /.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /.scss$/, use: [ 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader', ] }, { test: /.(eot|svg|ttf|woff)$/, use: 'file-loader' } ] }, optimization: { splitChunks: { chunks: 'all' } } }; module.exports = (env, argv) => { console.log('===', env, argv); if (env && env.production) { return merge(commonConfig, prodConfig); } return merge(commonConfig, devConfig); };
// webpack.dev.js var path = require('path'); var devConfig = { mode: 'development', devtool: "cheap-module-eval-source-map", devServer: { contentBase: path.resolve(__dirname, 'dist'), open: true, port: 3000, }, }; module.exports = devConfig;
// webpack.prod.js var prodConfig = { mode: 'production', devtool: "cheap-module-source-map" }; module.exports = prodConfig;
"dev": "webpack --config ./build/webpack.common.js --watch",
運行 npm run dev,會發現：
image.png
現在 env 是空的，argv 是我們的一些運行參數。我們現在手動傳入 env：
"dev": "webpack --env.development --config ./build/webpack.common.js --watch",
image.png
發現此時 env 是我們在腳本指定的值，並且同時該屬性也保存到了 argv。這樣我們就可以根據環境做區分打包了：
"dev": "webpack --env.development --config ./build/webpack.common.js --watch", "build": "webpack --env.production --config ./build/webpack.common.js"
3. process.env.NODE_ENV
對於配置文件，我們可以使用 env，那麼在源碼當中，我們是否可以利用環境變量呢？可以看 mode
image.png
mode 本身會通過 DefinePlugin 提供一個全局變量。我們來看下：
// index.js console.log('-----', process.env.NODE_ENV);
打包如下：
image.png
我們就可以在源碼中根據這個變量來進行環境的區分。這裡涉及到 DefinePlugin 插件，這個插件可以定義一些全局的變量，我們可以在模塊當中直接使用這些變量，無需作任何聲明。
4. 小結
合理利用環境變量，能幫助我們簡化邏輯。但要防止濫用，能通過配置文件單獨區分配置的還是盡量寫在配置文件，方便維護。
參考
webpack4系列教程（九）：開發環境和生產環境 https://webpack.js.org/configuration/mode/#mode-development NODE_ENV和webpack 理解webpack之process.env.NODE_ENV詳解(十八) Webpack DefinePlugin And ProvidePlugin
