1
2
3
4
5
6
7
8
9
**Webpack 3 to 4**

* UglifyJsPlugin 現在預設內建在 webpack 了，如果只需要調整設定值，只要設定 `.optimization.minimize` 和 `.optimization.minimizer` 但沒有 export，如果需要加上 OptimizeCssAssetsPlugin，要另外 `npm install` + `require` 再塞回 `minimizer`

* CommonsChunkPlugin 不能用了，由 `.optimization.splitChunks` 取代。預設應該不錯用... 最簡單的自定就是寫 `test: /node_modules/`。如果有多個 entry 的話，可以先把 maxInitialRequests 調到 10，避免看不出效果，然後再視效果調整。如果有用 `mini-css-extracting-webpack-plugin` 的話，要注意使用 function 型式的 test，因為這個 plugin 會把 `module.resource` 拔掉，如果要使用 function 判斷，請參考 webpack 裡的 `lib/optimize/SplitChunksPlugin.js` 的 `checkTest`

* html-webpack-plugin v3 以下不支援 splitChunks，但可以透過 html-webpack-include-sibling-chunks-plugin 修正，原本需要額外指定 "commons chunk" 的行為可刪除。html-webpack-plugin v4 會直接支援 splitChunks，但尚未 release (`yarn install "html-webpack-plugin@next"` 可以試用)。

* 一些 plugin 會自動視 mode 開/關了，例如 NamedModulesPlugin 和 HotModuleReplacementPlugin (ref: https://webpack.js.org/concepts/mode/ )