webpack4升级指北

最近发现仍是有听过人看这篇文章，因此再来更新一下。首先如今webpack4已经稳定，各个插件和loader基本上直接装均可以版本匹配，好比html-webpack-plugin，若是有不匹配的看peerDependencies提醒，会提示你须要安装新的版本。还有就是extract-text-webpack-plugin做者好像不想维护了，如今能够用mini-css-extract-plugin，webpack5听说会集成css打包，就不须要插件了

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

安装

首先你要从新安装如下的依赖包：

1. webpack4
2. webpack-cli（用来启动webpack）
3. html-webpack-plugin尚未更新，会出现compilation.templatesPlugin is not a function的错误，目前须要npm i webpack-contrib/html-webpack-plugin -D安装，官方说法是由于做者这段时间没空更新，因此他们本身fork了一份改了，如今先用这种方式用着，等做者有空了再合并进去。
4. 其余各类配件升级，dev-server升级到3，各类loader大家本身看着办，若是是新装的应该是已经支持了的，若是在编译过程当中报can not find xxx的错误，说明xxx对应的loader可能须要升级了，由于webpack4去掉了this.options的支持
5. 看一下有没有peerDependencies的提醒，有的话升级如下插件。目前来讲我剩下一个ajv-keywords@3.1.0 requires a peer of ajv@^6.0.0 but none is installed. You must 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进行模块划分，详细文档看这里

官方的说法是默认设置已经对大部分用户来讲很是棒了，可是须要注意一个问题，默认配置只会对异步请求的模块进行提取拆分，若是要对entry进行拆分，须要设置optimization.splitChunks.chunks = 'all'。其余的内容你们就本身研究吧。

对应以前咱们拆分runtime的状况，如今也有一个配置optimization.runtimeChunk，设置为true就会自动拆分runtime文件

UglifyJsPlugin

如今也不须要使用这个plugin了，只须要使用optimization.minimize为true就行，production mode下面自动为true

optimization.minimizer能够配置你本身的压缩程序

其余

还有不少是咱们平时使用不太到的升级，更多的是一些性能上的优化和功能上的升级，附上官方change log，但愿官方文档赶忙出来吧。