Webpack3 正式版發佈

繼 Node, React, Angular 版本失控以後，Webpack 的版本也坐上了?

在以前的文章裏，就提到了由於年前版本回退的緣由，我特地推遲了升級 webpack，就怕它又搞什麼大新聞。

然而，沒想到仍是中了圈套，webpack2 堅挺了還不到半年，就迎來了它的替代者。

就在一週前 webpack3 正式版發佈了！

此次版本升級的主要緣由有如下幾點：

• webpack 內部實現變化

• 新增了模塊串聯功能。以前，webpack 會爲每一個模塊建立各自的閉包，使用串聯功能將模塊鏈接到一塊兒後，就只需爲這真個模塊建立一個單獨的閉包，從而減小沒必要要的代碼

• 增長動態加載註釋，便可爲動態加載定義 chunk 名

最最最重要的一點是不用修改任何配置就能從 webpack2 升級至 webpack3，這總算讓我上個月的升級沒有白費，至少 98% 的用戶是這樣。

既然，不用改代碼就能升級，又能大幅減少輸出文件大小，那就升一波看看效果。先看一眼升級前的打包結果，

如今，經過 npm 命令默認安裝的已是 3.0.0 的版本。升級的話，由於是大版本，因此別忘了先改 package.json 裏面的依賴版本。

升級以後直接跑命令，順利打包。（謝天謝地，不是那 2%。）

只是多了一個 warning。

DeprecationWarning: Chunk.modules is deprecated. Use Chunk.getNumberOfModules/mapModules/forEachModule/containsModule instead.

這是由一些 webpack plugin 引發的，好比：extract-text-webpack-plugin 等。不過，不用理它。首先，它不影響打包，其次，已經有人提了 pr。

結果看上去是否是和以前基本同樣？不要着急，那是由於尚未用上模塊串聯的功能。開啓模塊串聯的功能須要在配置中簡單的加一個 plugin。

plugins: [
        // ...
        new webpack.optimize.ModuleConcatenationPlugin()
    ]

再看一眼結果，

什麼~app.js 只小了 3 kb（5%），廣告果真都是騙人的，無論國內仍是國外...?（難道姿式不對，升級了的朋友都說說小了多少）

這樣 webpack 3 升級就完成了，也用上了新特性，總得來講此次升級在文件大小以及打包時間上仍是有所優化的，再加之升級的 effort 幾乎爲 0，仍是很是值得一試的。

PS：ESlint 也發佈了 4.0 版本。
（前端界一個個都是版本大佬）

首發於我的博客，歡迎訂閱。