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，但願官方文檔趕忙出來吧。