Webpack Mode(模式)

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

string = production: none | development | production

用法

只需在配置对象中提供 mode 选项：

module.exports = {
  mode: development,
};

或者从 CLI 参数中传递：

webpack --mode=development

支持以下字符串值：

选项	描述
`development`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `development`. 为模块和 chunk 启用有效的名。
`production`	会将 `DefinePlugin` 中 `process.env.NODE_ENV` 的值设置为 `production`。为模块和 chunk 启用确定性的混淆名称，`FlagDependencyUsagePlugin`，`FlagIncludedChunksPlugin`，`ModuleConcatenationPlugin`，`NoEmitOnErrorsPlugin` 和 `TerserPlugin` 。
`none`	不使用任何默认优化选项

如果没有设置，webpack 会给 mode 的默认值设置为 production。

Mode: development

// webpack.development.config.js
module.exports = {
  mode: development,
};

Mode: production

// webpack.production.config.js
module.exports = {
  mode: production,
};

Mode: none

// webpack.custom.config.js
module.exports = {
  mode: none,
};

如果要根据 webpack.config.js 中的 mode 变量更改打包行为，则必须将配置导出为函数，而不是导出对象：

var config = {
  entry: ./app.js,
  //...
};

module.exports = (env, argv) => {
  if (argv.mode === development) {
    config.devtool = source-map;
  }

  if (argv.mode === production) {
    //...
  }

  return config;
};