描述
在 webpack 4.x 版本中引入了 mode 的概念，在运行 webpack 时，只需要指定是 production 或者 development 两个 mode 中其中一个就能构建对应的环境。
使用
在配置文件中区分 mode
根据官方的文档多种配置类型，配置文件可以对外暴露一个函数
module.exports = (env, argv) => ({
// ...其它配置
optimization: {
minize: false,
// 使用 argv 来获取 mode 参数的值
minimizer: argv.mode === 'production' ? [
// mode 为 production 时 webpack 会默认使用压缩 JS 的 plugin
new UglifyJsPLUGIN({ /* 你自己的配置 */ })，
] : []
}
})
我们可以通过这个配置文件获取到 mode，根据获取值构建不同的环境，根据环境再配置特殊的 loader 和 plugin
拆分配置（webpack 3）
把 webpack 的配置按照不同的环境拆分成多个文件，运行时直接根据环境变量加载对应的配置
- webpack.base.js // 基础配置，提供个多个文件共享
- webpack.dev.js // 开发环境使用的配置
- webpack.production.js // 生产环境使用的配置
合并配置
对于 webpage 的配置，其实是对外暴露一个 JS 对象，所以我们可以使用 JS 代码来修改它
我们可以使用 webpack-merge 将对应环境的多个配置对象整合后提供给 webpack 使用
const merge = require('webpack-merge')
const base = require('./webpack.base.js')
const dev = require('./webpack.dev.js')
module.exports = merge(base,dev)
