最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
webpack中的模式mode如何使用 webpack中的模式mode使用详解
时间:2020-02-20 编辑:袖梨 来源:一聚教程网
本篇文章小编给大家分享一下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: [ - 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的文件小。
相关文章
- SpringBoot自定义bean绑定解析 10-24
- Javaweb工程运行报错HTTP Status 404解决教程 10-20
- JAVA获取jvm和操作系统相关信息方法 10-20
- BeanFactory和FactoryBean的区别讲解 10-20
- 微信小程序的宿主环境实现教程 10-10
- dispatchEvent解决重叠元素响应事件教程 10-10