モード

mode 設定オプションを指定すると、webpack は組み込みの最適化をそれに応じて使用するように指示します。

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

使用法

設定で mode オプションを指定します。

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

または、CLI 引数として渡します。

webpack --mode=development

次の文字列値がサポートされています。

オプション説明
developmentDefinePluginprocess.env.NODE_ENVdevelopment の値に設定します。モジュールとチャンクに便利な名前を有効にします。
productionDefinePluginprocess.env.NODE_ENVproduction の値に設定します。モジュールとチャンクの決定論的なマングル名を有効にし、FlagDependencyUsagePluginFlagIncludedChunksPluginModuleConcatenationPluginNoEmitOnErrorsPlugin、および TerserPlugin を有効にします。
noneデフォルトの最適化オプションをすべて無効にします。

設定されていない場合、webpack は mode のデフォルト値として production を設定します。

モード: 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