webpack中的模式(mode)使用详解

提供 mode 配置选项,告知 webpack 使用相应模式的内置优化。

用法

只在配置中提供 mode 选项:

module.exports = { mode: 'production' };

或者从 CLI 参数中传递:

webpack --mode=production

支持以下字符串值:

1.development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

// webpack.development.config.js module.exports = { + mode: 'development' - plugins: [ - new webpack.NamedModulesPlugin(), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), - ] }

2.production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

// webpack.production.config.js module.exports = { + mode: 'production', - plugins: [ - new UglifyJsPlugin(/* ... */), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), - new webpack.optimize.ModuleConcatenationPlugin(), - new webpack.NoEmitOnErrorsPlugin() - ] }

production模式下会启用UglifyJsPlugin插件(移除未使用的内容和文件压缩),分别用production和development打包,编译的区别:

1.development打包后,一些没有依赖的方法 变量 文件会保留,production则会移除。

2.production打包后,代码会进行压缩,比development的文件小。

到此这篇关于webpack中的模式(mode)使用详解的文章就介绍到这了,更多相关webpack 模式内容请搜素脚本之家以前的文章或下面相关文章,希望大家以后多多支持脚本之家!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/fbb194080cb0a76c675f4f3590f85544.html