webpack中的模式(mode)使用详解
模式(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:[
-newwebpack.NamedModulesPlugin(),
-newwebpack.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:[
-newUglifyJsPlugin(/*...*/),
-newwebpack.DefinePlugin({"process.env.NODE_ENV":JSON.stringify("production")}),
-newwebpack.optimize.ModuleConcatenationPlugin(),
-newwebpack.NoEmitOnErrorsPlugin()
-]
}
production模式下会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩），分别用production和development打包，编译的区别：
1.development打包后，一些没有依赖的方法变量文件会保留，production则会移除。
2.production打包后，代码会进行压缩，比development的文件小。
到此这篇关于webpack中的模式(mode)使用详解的文章就介绍到这了,更多相关webpack模式内容请搜素毛票票以前的文章或下面相关文章，希望大家以后多多支持毛票票！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。