Webpack Mode(模式)

提供 ?mode? 配置選項(xiàng)，告知 webpack 使用相應(yīng)模式的內(nèi)置優(yōu)化。

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

用法

只需在配置對象中提供 ?mode? 選項(xiàng)：

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

或者從 CLI 參數(shù)中傳遞：

webpack --mode=development

支持以下字符串值：

如果沒有設(shè)置，webpack 會給 ?mode? 的默認(rèn)值設(shè)置為 ?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',
};

如果要根據(jù) webpack.config.js 中的 mode 變量更改打包行為，則必須將配置導(dǎo)出為函數(shù)，而不是導(dǎo)出對象：

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

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

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

  return config;
};

Further Reading

• webpack default options (source code)