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 相关文章推荐
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
基于jquery的商品展示放大镜
Aug 07 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
May 12 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
javascript 判断用户有没有操作页面
Oct 17 Javascript
vue form 表单提交后刷新页面的方法
Sep 04 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
Nuxt默认模板、默认布局和自定义错误页面的实现
May 11 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
帅气的琦玉老师
2020/03/02 日漫
PHP新手上路(十三)
2006/10/09 PHP
生成卡号php代码
2008/04/09 PHP
php PDO中文乱码解决办法
2009/07/20 PHP
检查url链接是否已经有参数的php代码 添加 ? 或 &
2010/02/09 PHP
php数组的概述及分类与声明代码演示
2013/02/26 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
php根据日期或时间戳获取星座信息和生肖等信息
2015/10/20 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
2009/10/25 Javascript
ajax请求get与post的区别总结
2013/11/04 Javascript
js写的方法实现上传图片之后查看大图
2014/03/05 Javascript
JavaScript实现图片懒加载(Lazyload)
2016/11/28 Javascript
Javascript中call,apply,bind方法的详解与总结
2016/12/12 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
详解Vue 方法与事件处理器
2017/06/20 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
[02:39]DOTA2英雄基础教程 极限穿梭编织者
2013/12/05 DOTA
[01:42:49]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第一场 2月26日
2021/03/11 DOTA
Django rest framework基本介绍与代码示例
2018/01/26 Python
Flask框架使用DBUtils模块连接数据库操作示例
2018/07/20 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
python集合能干吗
2020/07/19 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
详解HTML5之pushstate、popstate操作history,无刷新改变当前url
2017/03/15 HTML / CSS
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
行政助理岗位职责
2013/11/10 职场文书
房屋改造计划书
2014/01/10 职场文书
法院信息化建设方案
2014/05/21 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
Pytest之测试命名规则的使用
2021/04/16 Python
redis实现排行榜功能
2021/05/24 Redis