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


Posted in Javascript onFebruary 20, 2020

模式(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 模式内容请搜素三水点靠木以前的文章或下面相关文章,希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
Jquery为a标签的href赋值实现代码
May 03 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
Bootstrap实现弹性搜索框
Jul 11 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
Dec 15 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
Apr 13 Javascript
bootstrap模态框示例代码分享
May 17 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
React-redux实现小案例(todolist)的过程
Sep 29 Javascript
微信小程序自定义tabBar在uni-app的适配详解
Sep 30 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
jquery向后台提交数组的代码分析
Feb 20 #jQuery
koa-passport实现本地验证的方法示例
Feb 20 #Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
Feb 20 #Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 #Javascript
浅析JS中NEW的实现原理及重写
Feb 20 #Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 #Javascript
Javascript实现html转pdf高清版(提高分辨率)
Feb 19 #Javascript
You might like
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
php给一组指定关键词添加span标签的方法
2015/03/31 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
extjs两个tbar问题探讨
2013/08/08 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
js动态创建上传表单通过iframe模拟Ajax实现无刷新
2014/02/20 Javascript
js简单的点击返回顶部效果实现方法
2015/04/10 Javascript
跟我学习javascript的最新标准ES6
2015/11/20 Javascript
jQuery禁用键盘后退屏蔽F5刷新及禁用右键单击
2016/01/22 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
Node.js  事件循环详解及实例
2017/08/06 Javascript
vue cli升级webapck4总结
2018/04/04 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JQuery特殊效果和链式调用操作示例
2019/05/13 jQuery
ElementUI radio组件选中小改造
2019/08/12 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python中的pygal安装和绘制直方图代码分享
2017/12/08 Python
Python使用OpenCV进行标定
2018/05/08 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
QML用PathView实现轮播图
2020/06/03 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
css3实现的下拉菜单效果示例
2014/01/22 HTML / CSS
出国留学介绍信
2014/01/13 职场文书
领导视察欢迎词
2014/01/15 职场文书
妇女干部培训方案
2014/05/12 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年团队工作总结
2014/11/24 职场文书
自愿离婚协议书范本
2015/01/26 职场文书
公司的力量观后感
2015/06/05 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
mysql数据库如何转移到oracle
2022/12/24 MySQL