模式

提供 mode 設定選項會指示 webpack 根據內建最佳化進行使用。

字串 = 'production': 'none' | 'development' | 'production'

用法

在設定檔中提供 mode 選項

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

或將其作為 CLI 參數傳遞

webpack --mode=development

支援下列字串值

選項說明
developmentDefinePlugin 中的 process.env.NODE_ENV 設定為 development。啟用模組和區塊的有用名稱。
productionDefinePlugin 上設定 process.env.NODE_ENVproduction。啟用模組和區塊的確定性混淆名稱、FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPluginTerserPlugin
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',
};

如果您想根據 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;
};

6 貢獻者

EugeneHlushkobyzykmrichmondFentalsnitin315chenxsan