Webpack 4 更快打包，更少設定

“Binders and boxes on shelves in a large archive” by Samuel Zeller on Unsplash

webpack 最近更新了第四版，叫做 Legato , 主要更新了以下事項。

1. 更快的打包速度
2. 零配置（做複雜的專案還是建議要設定 webpack.config.js）
3. 移除掉 CommonsChunkPlugin
4. WebAssembly 支援

以前我們有做了一個 simple_react_start_kit，是用 webpack3 打包，為了效能的問題調教很久，打包出來的結果也不盡理想，大約是 1mb

webpack3 打包結果

使用 webpack4 的 production mode 打包，雖然速度並沒有官方號稱的加速 90% ，但是整體容量減少了

webpack4 打包結果

新的 webpack4 添加了默認的設定，我們可以不用在指定資料夾了，於是我把 entry 跟 output 從設定拿掉了。

• entry 預設資料夾在 ./src
• output.path 預設資料夾在 ./dist

以往在 hot-reload 跟 dev-server 下了很多苦心，設定了一堆東西，現在可以通通拔掉了。（雖然我不確定是不是從 webpack3 就可以拔掉，但是我現在都拔掉）

這些設定很難維護，都被我拔掉了☀️

取而代之用簡單的指令把 dev-server 跑起來，並且擁有 hot-reload 功能

webpack-dev-server --mode development --open --hot

關於以前要用很多方法去最小化跟醜化 js，現在也都不用在 config 設定了，取而代之在執行 production 階段的指令會加上 --mode production 這段來讓新的 webpack 自動優化

webpack --mode production

整個 webpack.config.js 大概就會只剩下 module , resolve , plugin 這三大類，變得簡單易懂多了。

總結

雖然官方號稱零配置了，簡單說其實配置是改為由 CLI 指令，像是透過 --module-bind 參數，我們就不用在 config 裡面定義 module 了，像是以下範例一樣。

webpack --mode development --module-bind js=babel-loader --module-bind css=style-loader!css-loader!postcss-loader

假設我們有兩個環境，這些指令就要複製貼上兩次，每次修改的時候就難免會有失誤發生。

但是 webpack4 打包後的大小的確是有讓我驚豔到，這邊由衷的讚賞這次更新帶來的便利！！

最後推廣一下 💫simple_react_start_kit 💫 雖然今年已經 2018 了～