vue cli 平穩升級webapck4

webpack4 released 已經有一段時間了，插件系統趨於平穩，適逢對webpack3的打包速度很不滿意，所以決定將當前在作的項目進行升級，正好也實踐一下webpack4。

新特性

0配置

應該是parcel出來之後，webpack團隊意識到其配置確實有點複雜，不太容易上手。so, webapck4 開始支持0配置啓動。不過，萬變不離其宗，webpack4的0配置也只是支持了默認entry 和 output而已，即默認entry爲./src,默認output爲/dist。

模式選擇mode

mode有兩個可選項，production & development。做爲必選項，mode是不可缺省的。在production模式下，會默認作一些必要的優化，如代碼壓縮和做用域提高，還會默認指定process.env.NODE_ENV 爲 production。在development模式下，優化了增量構建，支持註釋和提示，而且支持 eval 下的 source maps，同時默認指定process.env.NODE_ENV 爲 development。

sideEffects

經過該配置能夠大幅度減少打包體積。當模塊的 package.json 配置sideEffects:false代表該模塊沒有反作用，也就意味着 webpack 能夠安全地清除被用於重複導出(re-exports)的代碼。

模塊類型

webpack4提供了5種模塊類型。

json: 可經過 require 和 import 導入的 JSON 格式的數據(默認爲 .json 的文件)

webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認類型）

javascript/auto: (webpack 3中的默認類型)支持全部的JS模塊系統：CommonJS、AMD。

javascript/esm: EcmaScript模塊（默認 .mjs 文件）。

javascript/dynamic: 僅支持 CommonJS & AMD。
複製代碼

JSON

webpack 4 不只支持本地處理 JSON，還支持對 JSON 的 Tree Shaking。當使用 ESM 語法 import json 時，webpack 會消除掉JSON Module 中未使用的導出。此外，若是要用 loader 轉換 json 爲 js，須要設置 type 爲 javascript/auto。

optimization

Webpack 4 刪除了 CommonsChunkPlugin，並默認啓用了它的許多功能。所以webpack4能夠實現很好的默認優化。可是，對於那些須要自定義的緩存策略，增長了 optimization.splitChunks 和 optimization.runtimeChunk。具體解釋可參考這篇文章，解釋得很詳細。RIP CommonsChunkPlugin 。

手把手升級

我是把原來vue cli的項目作了一下升級，整體來講，升級還算是比較順利步驟，這裏咱們分紅兩步走，首先升級相關依賴的插件，而後優化webapck配置文件。

升級插件

 首先要把下面列表的插件升級到對應版本或者最新版本

1. webpack@4.4.1
2. css-loader@0.28.10,
3. extract-text-webpack-plugin@4.0.0-beta.0,
4. file-loader@1.1.11,
5. html-webpack-plugin@3.1.0,
6. optimize-css-assets-webpack-plugin@4.0.0,
7. url-loader@1.0.1,
8. vue-loader@14.2.2,
9. vue-style-loader@4.1.0,
10. vue-template-compiler@2.5.16,
11. webpack-bundle-analyzer@2.11.1,
12. webpack-dev-middleware@3.1.0,
13. webpack-dev-server@3.1.1,
14. webpack-hot-middleware@2.21.2

若是遇到其餘包報錯，應該是升級到最新的就能夠解決了。

更新配置文件

webpack.dev.conf.js

dev環境變化不大，畢竟webpack4很大一部分的優化都是針對生產環境的，該文件咱們只須要刪除一些再也不須要的插件既能夠。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已經默認配置。同時，要設置

mode: 'development'
複製代碼

webpack.production.conf.js

webvpack4中改動最大，影響也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。之前的CommonsChunkPlugin主要用來抽取代碼中的共用部分，webpack runtime之類的代碼，結合chunkhash，實現最好的緩存策略。而optimization.splitChunks則實現了相同的功能，而且配置更加靈活，具體解釋可參考這篇文章，解釋得很詳細。RIP CommonsChunkPlugin

mode: 'production',
optimization: {
  splitChunks: {
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        chunks: 'initial',
        name: 'vendors',
      },
      'async-vendors': {
        test: /[\\/]node_modules[\\/]/,
        minChunks: 2,
        chunks: 'async',
        name: 'async-vendors'
      }
    }
  },
  runtimeChunk: { name: 'runtime' }
}
複製代碼

總結

整體來講本次升級還算順利，不到一天搞定，目前感受，打包速度大約優化了70%左右，同時打包後的代碼體積也有了很大的優化，帶來的效果很顯著的。 若是以爲我沒有說明白，這裏有一份配置，請拿走