webpack 4 升级指北

2018年2月25日,刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期,终于发布了正式版,那么抛给广大开发者的问题又来了,我是不是要升级了呢?本文就站在一个之前用webpack3开发项目,现在打算升级到4的角度上,来讲一讲需要升级的内容。

安装

首先你要重新安装以下的依赖包:

  1. webpack4
  2. webpack-cli(用来启动webpack)
  3. html-webpack-plugin还没有更新,会出现 compilation.templatesPluginisnotafunction的错误,目前需要 npm i webpack-contrib/html-webpack-plugin-D安装,官方说法是因为作者这段时间没空更新,所以他们自己fork了一份改了,现在先用这种方式用着,等作者有空了再合并进去。
  4. 其他各种配件升级,dev-server升级到3,各种loader你们自己看着办,如果是新装的应该是已经支持了的,如果在编译过程中报 cannotfind xxx的错误,说明xxx对应的loader可能需要升级了,因为webpack4去掉了 this.options的支持
  5. 看一下有没有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,现已弃用)。

不同模式下的默认配置如下:

  1. 生产环境默认开启了很多代码优化(minify,splite等)
  2. 开发时开启注视和验证,并且自动加上了eval devtool
  3. 生产环境不支持watching,开发环境优化了重新打包的速度
  4. 生产环境开启模块串联(原ModuleConcatenationPlugin),没用过不多说
  5. 自动设置 process.env.NODE_ENV到不同环境,也就是不需要 DefinePlugin来做这个了
  6. 如果你给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),希望官方文档赶紧出来吧。

觉得本文对你有帮助?请分享给更多人。

原文发布于微信公众号 - 程序员宝库(chengxuyuanbaoku)

原文发表时间:2018-03-03

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏散尽浮华

Netdata---Linux系统性能实时监控平台部署记录

通常来说,作为一个Linux的SA,很有必要掌握一个专门的系统监控工具,以便能随时了解系统资源的占用情况。下面就介绍下一款Linux性能实时监测工具-Netda...

7748
来自专栏PHP在线

在Mac下使用MAMP Pro环境

以前,我使用Windows作为自己的工作系统,后来,改用Mac作为自己的主要工作系统了。 在Windows下,快速搭建*AMP环境,使用xampp或者WAMP之...

7117
来自专栏北京马哥教育

原创投稿 | 防火墙及NAT服务

一、简介 1. 关于防火墙 防火墙,其实就是用于实现Linux下访问控制的功能的,它分为硬件和软件防火墙两种。无论是在哪个网络中,防火墙工作的地方一定是在网...

4969
来自专栏张戈的专栏

Linux :MAC 地址克隆方法

摘 要 虽然 MAC 地址由厂商指定,但用户可以改变它,这就是传说中的“MAC 地址欺骗”。你可能会疑惑,弄这个有什么用?好吧,玛思阁举个例子,比如,电信宽带...

3755
来自专栏JetpropelledSnake

HCNP学习笔记之IP地址、子网掩码、网关的关系

网络管理中的IP地址、子网掩码和网关是每个网管必须要掌握的基础知识,只有掌握它,才能够真正理解TCP/IP协议的设置。

1991
来自专栏黑白安全

浅谈csrf

CSRF(Cross-site request forgery)跨站请求伪造,也被称为“One Click Attack”或者Session Riding,通常...

1372
来自专栏MySQL

分布式消息中间件 — MQ

消息队列(Message Queue,简称 MQ)是阿里巴巴集团中间件技术部自主研发的专业消息中间件。用于保证异构应用之间的消息传递。应用程序通过MQ接口进行互...

5266
来自专栏FreeBuf

CVE-2016-10277在MOTO X手机上的漏洞利用实践

CVE-2016-10277是存在于摩托罗拉系列手机的bootloader高危漏洞,可以通过内核命令注入劫持手机的启动流程,加载攻击者控制的initramfs,...

3057
来自专栏小文博客

《Python疑难杂症》——(一)PIP安装模块下载慢或者无法下载

正式入坑Python,遇到的几点疑难杂症和搜索到的解决方案在这里给大家分享下。希望能帮到一些初学者,你也可以在文章下面评论你遇到的Python问题以及解决方案,...

1111
来自专栏源码之家

.htaccess重写让空间绑定多个域名到不同的目录支持多站点

5737

扫码关注云+社区

领取腾讯云代金券