webpack4 released 已經(jīng)有一段時間了，插件系統(tǒng)趨于平穩(wěn)，適逢對webpack3的打包速度很不滿意，因此決定將當(dāng)前在做的項目進行升級，正好也實踐一下webpack4。

新特性

0配置

應(yīng)該是parcel出來以后，webpack團隊意識到其配置確實有點復(fù)雜，不太容易上手。so, webapck4 開始支持0配置啟動。不過，萬變不離其宗，webpack4的0配置也只是支持了默認(rèn)entry 和 output而已，即默認(rèn)entry為./src,默認(rèn)output為/dist。

模式選擇mode

mode有兩個可選項，production & development。作為必選項，mode是不可缺省的。在production模式下，會默認(rèn)做一些必要的優(yōu)化，如代碼壓縮和作用域提升，還會默認(rèn)指定process.env.NODE_ENV 為 production。在development模式下，優(yōu)化了增量構(gòu)建，支持注釋和提示，并且支持 eval 下的 source maps，同時默認(rèn)指定process.env.NODE_ENV 為 development。

sideEffects

通過該配置可以大幅度減小打包體積。當(dāng)模塊的 package.json 配置sideEffects:false表明該模塊沒有副作用，也就意味著 webpack 可以安全地清除被用于重復(fù)導(dǎo)出(re-exports)的代碼。

模塊類型

webpack4提供了5種模塊類型。

json: 可通過 require 和 import 導(dǎo)入的 JSON 格式的數(shù)據(jù)(默認(rèn)為 .json 的文件) webassembly: WebAssembly 模塊，（目前是 .wasm 文件的默認(rèn)類型） javascript/auto: (webpack 3中的默認(rèn)類型)支持所有的JS模塊系統(tǒng)：CommonJS、AMD。 javascript/esm: EcmaScript模塊（默認(rèn) .mjs 文件）。 javascript/dynamic: 僅支持 CommonJS & AMD。

JSON

webpack 4 不僅支持本地處理 JSON，還支持對 JSON 的 Tree Shaking。當(dāng)使用 ESM 語法 import json 時，webpack 會消除掉JSON Module 中未使用的導(dǎo)出。此外，如果要用 loader 轉(zhuǎn)換 json 為 js，需要設(shè)置 type 為 javascript/auto。

optimization

Webpack 4 刪除了 CommonsChunkPlugin，并默認(rèn)啟用了它的許多功能。因此webpack4可以實現(xiàn)很好的默認(rèn)優(yōu)化。但是，對于那些需要自定義的緩存策略，增加了 optimization.splitChunks 和 optimization.runtimeChunk。具體解釋可參考這篇文章，解釋得很詳細(xì)。RIP CommonsChunkPlugin點擊預(yù)覽
。

手把手升級

我是把原來vue cli的項目做了一下升級，總體來說，升級還算是比較順利步驟，這里我們分成兩步走，首先升級相關(guān)依賴的插件，然后優(yōu)化webapck配置文件。

升級插件

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

webpack@4.4.1
css-loader@0.28.10,
extract-text-webpack-plugin@4.0.0-beta.0,
file-loader@1.1.11,
html-webpack-plugin@3.1.0,
optimize-css-assets-webpack-plugin@4.0.0,
url-loader@1.0.1,
vue-loader@14.2.2,
vue-style-loader@4.1.0,
vue-template-compiler@2.5.16,
webpack-bundle-analyzer@2.11.1,