区分环境配置

之前有再webpack-config.js中写mode这个参数，但是发现其实这个mode可以被改变，比如：

npx webpack --mode development | production

这个优先级最高，其次是webpack.config.js，最后才是默认的production

cross-env

在过去的时候，webpack需要区分当前不同的环境的话只能根据 process.env.NODE_ENV，这样的话就需要在每次执行指令的时候指定对应的环境变量。

但是难受的是，不同平台配置node环境变量的方式不同：cross-env 就是为了解决这个问题。

不过这样依然很麻烦，webpack5能够支持函数导出，这有了转机

webpack.config.js

webpack.config.js导出的最终的对象决定如何进行打包，但其实有两种格式的配置：

module.export = WebpackConfig
module.export = function(env) => WebpackConfig

当导出一个函数时，在生成配置之前会把在终端执行的命令的参数组合成 env，因此可以在函数内判断不同的env来返回不同的WebpackConfig

webpack-merge

为了拆分webpack.config.js文件，拆分成webpack.config.pro.js、webpack.config.dev.js。

我们确实可以通过 env导出不同的配置文件的对象，但是我们发现两个文件有太多的重复项，能不能抽离一个webpack.config.common.js，并在具体的环境中合并配置

这个时候就需要 webpack-merge 出场，它能对配置文件进行 深度合并

// webpack.config.js
const { merge } = require('webpack-merge')
const CommonWebpackConfig = require('./webpack.config.common.js')
const DevWebpackConfig = require('./webpack.config.dev.js')
const ProWebpackConfig = require('./webpack.config.pro.js')

// @params[0] => --env参数配置 @params[1] => webpack配置
module.exports = ({mode}, argv) => {
  switch(mode) {
    case 'development':
      return merge(CommonWebpackConfig, DevWebpackConfig);
    case 'production':
      return merge(CommonWebpackConfig, ProWebpackConfig);
  }
}

npx webpack --env production // @params[0] = { ...default, production: true }
npx webpack --env mode=production // @params[0] = { ...default, mode: 'production' }

当然其实也有其它方法：

也可以通过 process.env.NODE_ENV 判断是什么环境，当然你必须在执行终端命令的时候设置NODE_ENV：'NODE_ENV=production webpack'；
当然可以通过webpack的命令式配置：'webpack --mode=development'，然后再 argv 能获取到 mode的参数

总结

代码案例在 code-example / 08-example

11-区分环境配置

区分环境配置

cross-env

webpack.config.js

webpack-merge

总结