模式

提供 mode 配置选项会告知 webpack 使用其内置的相应优化。

string = 'production': 'none' | 'development' | 'production'

用法

在配置中提供 mode 选项

module.exports = {
  mode: 'development',
};

或将其作为 CLI 参数传入

webpack --mode=development

支持以下字符串值

选项	描述
development	将 DefinePlugin 上的 process.env.NODE_ENV 值设置为 development。为模块和代码块启用有用的名称。
生产环境	将 DefinePlugin 上的 process.env.NODE_ENV 值设置为 production。为模块和代码块启用确定性的混淆名称，同时启用 FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin 和 TerserPlugin。
none	不使用任何默认的优化选项。

如果未设置，webpack 会将 production 作为 mode 的默认值。

模式：development

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

模式：production

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

模式：none

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

如果你想根据 mode 变量在 webpack.config.js 中改变行为，你必须导出一个函数而不是一个对象

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

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

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

  return config;
};