阅读(2564)
赞(25)
Webpack Mode(模式)
2023-05-12 17:18:03 更新
提供 mode
配置选项,告知 webpack 使用相应模式的内置优化。
string = 'production': 'none' | 'development' | 'production'
用法
只需在配置对象中提供 mode
选项:
module.exports = {
mode: 'development',
};
或者从 CLI 参数中传递:
webpack --mode=development
支持以下字符串值:
选项 | 描述 |
---|---|
development
|
会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 development . 为模块和 chunk 启用有效的名。 |
production
|
会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 production 。为模块和 chunk 启用确定性的混淆名称,FlagDependencyUsagePlugin ,FlagIncludedChunksPlugin ,ModuleConcatenationPlugin ,NoEmitOnErrorsPlugin 和 TerserPlugin 。 |
none
|
不使用任何默认优化选项 |
如果没有设置,webpack 会给 mode
的默认值设置为 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',
};
如果要根据 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;
};
Further Reading