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的提醒，有的話升級以下外掛。目前來說我剩下一個 [email protected] 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)，希望官方文件趕緊出來吧。

覺得本文對你有幫助？請分享給更多人。