webpack 4 升级指北
2018年2月25日,刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期,终于发布了正式版,那么抛给广大开发者的问题又来了,我是不是要升级了呢?本文就站在一个之前用webpack3开发项目,现在打算升级到4的角度上,来讲一讲需要升级的内容。
安装
首先你要重新安装以下的依赖包:
- webpack4
- webpack-cli(用来启动webpack)
- html-webpack-plugin还没有更新,会出现
compilation.templatesPluginisnotafunction
的错误,目前需要npm i webpack-contrib/html-webpack-plugin-D
安装,官方说法是因为作者这段时间没空更新,所以他们自己fork了一份改了,现在先用这种方式用着,等作者有空了再合并进去。 - 其他各种配件升级,dev-server升级到3,各种loader你们自己看着办,如果是新装的应该是已经支持了的,如果在编译过程中报
cannotfind xxx
的错误,说明xxx对应的loader可能需要升级了,因为webpack4去掉了this.options
的支持 - 看一下有没有peerDependencies的提醒,有的话升级以下插件。目前来说我剩下一个
ajv-keywords@3.1.0requires a peer of ajv@^6.0.0but noneisinstalled.Youmust install peer dependencies yourself.
的莫名其妙提醒,暂时没什么影响,也没查到解决方法,所以先放着,你们如果重新安装包可能就没这个错了。
以上这些就是安装包的工作,基本就差不多了。
配置
mode
webpack加了一个 mode
配置,只有两个值 development|production
,对不同的环境他会提供不同的一些默认配置,比如开发环境下面默认启用 optimization.namedModules
(原NamedModulesPlugin,现已弃用),而生产环境默认使用 optimization.noEmitOnErrors
(原NoEmitOnErrorsPlugin,现已弃用)。
不同模式下的默认配置如下:
- 生产环境默认开启了很多代码优化(minify,splite等)
- 开发时开启注视和验证,并且自动加上了eval devtool
- 生产环境不支持watching,开发环境优化了重新打包的速度
- 生产环境开启模块串联(原ModuleConcatenationPlugin),没用过不多说
- 自动设置
process.env.NODE_ENV
到不同环境,也就是不需要DefinePlugin
来做这个了 - 如果你给mode设置为
none
,所有默认配置都去掉了
如果不加这个配置webpack会出现提醒,所以还是加上吧
CommonsChunkPlugin
相信大家如果听说过webpack4的更新,最大的感触应该就是去除了CommonsChunkPlugin,毕竟官方 change log
写的篇幅最多的就是这个
CommonsChunkPlugin删除之后,改成使用 optimization.splitChunks
进行模块划分,详细文档:(https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693
官方的说法是默认设置已经对大部分用户来说非常棒了,但是需要注意一个问题,默认配置只会对异步请求的模块进行提取拆分,如果要对entry进行拆分,需要设置 optimization.splitChunks.chunks='all'
。其他的内容大家就自己研究吧。
对应之前我们拆分runtime的情况,现在也有一个配置 optimization.runtimeChunk
,设置为true就会自动拆分runtime文件
UglifyJsPlugin
现在也不需要使用这个plugin了,只需要使用 optimization.minimize
为true就行,production mode下面自动为true
optimization.minimizer
可以配置你自己的压缩程序
其他
还有很多是我们平时使用不太到的升级,更多的是一些性能上的优化和功能上的升级,附上官方change log(https://github.com/webpack/webpack/releases),希望官方文档赶紧出来吧。
觉得本文对你有帮助?请分享给更多人。
- Apache NiFi 1.0.0测试版:邮件路由应用新型ListenSMTP
- 为什么我坚持使用 JavaScript 函数声明
- NewSQL数据库大对象块存储原理与应用
- 使用xUnit为.net core程序进行单元测试(下2)
- MongoDB + Spark: 完整的大数据解决方案
- 如何实现自然语言处理的集束搜索解码器
- PostgreSQL 使用advisory lock或skip locked消除行锁冲突, 提高几十倍并发更新效率
- 流动的数据——使用 RxJS 构造复杂单页应用的数据逻辑
- 内存泄漏的检测、解决、防止
- 大数据Hadoop快速入门教程
- 用Rust解决C语言的隐患
- GAN学习指南:从原理入门到制作生成Demo
- 从糖尿病监测看智能医疗发展
- Apache Beam:下一代的数据处理标准
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何修复无法启动的docker容器
- Kafka安装(极简版)
- parallelStream的坑,不踩不知道,一踩吓一跳
- leetcode链表之删除链表的节点
- Windows 技术篇-通过注册表查找vc运行库所在位置实战演示,通过ProductCode查看vc++运行库安装位置
- Python 库安装问题-whl is not a supported wheel on this platform.原因及解决办法
- 安装Go运行环境
- Python 语法问题-module 'pip' has no attribute 'pep425tags',告诉你如何正确查看pip支持,32位、64位查看pip支持万能方法
- 使用matplotlib绘制3D图表
- 微服务的用户认证与授权杂谈(下)
- Python 库安装问题-用pip安装pyHook3报错,原因及解决办法
- 微服务的用户认证与授权杂谈(上)
- Python 技术篇-win32、amd64结尾的whl库该选哪个,如何查看python平台支持
- Python 基础篇-pip卸载python库方法,pip命令大全
- Python 技术篇-pip安装的python库缓存位置查看方法,如何查看python库源码