mode
設定オプションを指定すると、webpack は組み込みの最適化をそれに応じて使用するように指示します。
string = 'production': 'none' | 'development' | 'production'
設定で mode
オプションを指定します。
module.exports = {
mode: 'development',
};
または、CLI 引数として渡します。
webpack --mode=development
次の文字列値がサポートされています。
オプション | 説明 |
---|---|
development | DefinePlugin の process.env.NODE_ENV を development の値に設定します。モジュールとチャンクに便利な名前を有効にします。 |
production | DefinePlugin の process.env.NODE_ENV を production の値に設定します。モジュールとチャンクの決定論的なマングル名を有効にし、FlagDependencyUsagePlugin 、FlagIncludedChunksPlugin 、ModuleConcatenationPlugin 、NoEmitOnErrorsPlugin 、および TerserPlugin を有効にします。 |
none | デフォルトの最適化オプションをすべて無効にします。 |
設定されていない場合、webpack は mode
のデフォルト値として production
を設定します。
// webpack.development.config.js
module.exports = {
mode: 'development',
};
// webpack.production.config.js
module.exports = {
mode: 'production',
};
// 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;
};