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
