webpack 4 升级指北

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

安装

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

webpack4

webpack-cli（用来启动webpack）

html-webpack-plugin还没有更新，会出现 的错误，目前需要 安装，官方说法是因为作者这段时间没空更新，所以他们自己fork了一份改了，现在先用这种方式用着，等作者有空了再合并进去。

其他各种配件升级，dev-server升级到3，各种loader你们自己看着办，如果是新装的应该是已经支持了的，如果在编译过程中报 的错误，说明xxx对应的loader可能需要升级了，因为webpack4去掉了 的支持

看一下有没有peerDependencies的提醒，有的话升级以下插件。目前来说我剩下一个 的莫名其妙提醒，暂时没什么影响，也没查到解决方法，所以先放着，你们如果重新安装包可能就没这个错了。

以上这些就是安装包的工作，基本就差不多了。

配置mode

webpack加了一个 配置，只有两个值 ，对不同的环境他会提供不同的一些默认配置，比如开发环境下面默认启用 （原NamedModulesPlugin，现已弃用），而生产环境默认使用 （原NoEmitOnErrorsPlugin，现已弃用）。

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

生产环境默认开启了很多代码优化（minify，splite等）

开发时开启注视和验证，并且自动加上了eval devtool

生产环境不支持watching，开发环境优化了重新打包的速度

生产环境开启模块串联（原ModuleConcatenationPlugin），没用过不多说

自动设置 到不同环境，也就是不需要 来做这个了

如果你给mode设置为 ，所有默认配置都去掉了

如果不加这个配置webpack会出现提醒，所以还是加上吧

CommonsChunkPlugin

相信大家如果听说过webpack4的更新，最大的感触应该就是去除了CommonsChunkPlugin，毕竟官方 写的篇幅最多的就是这个

CommonsChunkPlugin删除之后，改成使用 进行模块划分，详细文档：(https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693

官方的说法是默认设置已经对大部分用户来说非常棒了，但是需要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，如果要对entry进行拆分，需要设置 。其他的内容大家就自己研究吧。

对应之前我们拆分runtime的情况，现在也有一个配置 ，设置为true就会自动拆分runtime文件

UglifyJsPlugin

现在也不需要使用这个plugin了，只需要使用 为true就行，production mode下面自动为true

可以配置你自己的压缩程序

其他

还有很多是我们平时使用不太到的升级，更多的是一些性能上的优化和功能上的升级，附上官方change log(https://github.com/webpack/webpack/releases)，希望官方文档赶紧出来吧。

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

关注 “程序员宝库”微信公众号，直接获取各种编程资料！