總結 · 使用 webpack 定制前端開發環境

## 從 webpack 3.x 到 4.x 我們整個小冊主要內容是基于最新的 webpack 4.x 版本來寫的，但其實從一開始就提及 webpack 3.x 到 4.x 的變化，各個小節的內容多多少少都介紹到了 3.x 和 4.x 的差異，這里再作一下簡單的關于 3.x 到 4.x 變化的總結。首先，第 1 小節的時候就已經提到了，4.x 拆出來了一個 [webpack-cli](https://github.com/webpack/webpack-cli)，把 webpack 實際核心和命令行接口工具分開，并且 [webpack-cli](https://github.com/webpack/webpack-cli) 擔任了一些項目上管理的工作，例如項目初始化，webpack 版本升級的遷移等等，功能相對全面，并且這些的確不應該歸由 webpack 核心去處理。之前 [parcel-bundler](https://parceljs.org/) 的出現，對 webpack 還是有一定的沖擊，webpack 4.x 立馬就引入了零配置的概念，同時新增了 mode 參數（4.x 是必要的參數），這樣既協助開發者去區分環境，也可以更加自然地根據不同 mode 來添加更多默認的配置，如開發環境的 HMR、生產環境的代碼壓縮等，更加順應零配置的需求。然后 webpack 4.x 刪除了 CommonsChunkPlugin，把代碼分離的功能納入到 `optimization` 配置去管理。順應整個開發社區的需求，webpack 4.x 默認支持 [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) 了，同時為了以后的發展，開始著重強調代碼模塊類型的概念，現在主要還是支持了 JS 相關的代碼模塊類型，后續計劃是添加更多的類型，如 HTML、CSS 等。還有很重要的一點，4.x 做了很多構建性能方面的優化，讓 webpack 在以后面對大型項目構建時更加游刃有余。上面提到的是變化比較大的點，其實 webpack 3.x 從 4.x 做了很多很多，可以看出 webpack 自身項目的維護工作是相當活躍和優秀的，這里再把官方比較重要、詳細的介紹內容放在這里，方便希望更加詳細和深入了解的同學們查閱： * [webpack 4 released today](https://medium.com/webpack/webpack-4-released-today-6cdb994702d4) * [webpack 4 release log](https://github.com/webpack/webpack/releases/tag/v4.0.0) * [webpack 4 import and commonjs](https://medium.com/webpack/webpack-4-import-and-commonjs-d619d626b655) * [webpack 4: Code Splitting, chunk graph and the splitChunks optimization](https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366) * [webpack 4 mode and optimization](https://medium.com/webpack/webpack-4-mode-and-optimization-5423a6bc597a) * [webpack 4: migration guide for plugins/loaders](https://medium.com/webpack/webpack-4-migration-guide-for-plugins-loaders-20a79b927202) ## 回顧我們上面提到了，webpack 從 4.x 開始支持零配置，這讓我們的基礎使用變得更加簡單，但是根據不同項目的實際需要，我們還是需要花費一定時間去配置 webpack。在 webpack 配置中，`resolve` 字段下的選項可以用來控制 webpack 如何解析代碼模塊的路徑，webpack 解析代碼模塊路徑的這部分功能是使用 [enhanced-resolve](https://github.com/webpack/enhanced-resolve/) 來實現的。我們可以在 webpack 中配置使用不同的 loader 來處理不同的代碼文件類型，例如使用 `less-loader` 來使用 [Less](https://github.com/less/less.js) 預處理器，利用好 loader 可以打包前端中使用到的各種各樣的資源文件。 webpack 社區提供了很多優秀的 plugin 供前端開發者使用，我們在 webpack 配置中的 `plugins` 字段中添加需要的 plugin 實例即可，plugin 的具體使用選項由各個插件自身去定義，所以要用好插件，需要耐心地閱讀插件官方提供的使用文檔。 webpack 提供了 webpack-dev-server 和 webpack-dev-middleware 來簡單快速地創建開發環境中使用的靜態服務，通過該靜態服務可以訪問 webpack 構建好的結果，并且在這個基礎上，webpack 提供了 hot reload 的能力，代碼變更時自動更新頁面。在日常的前端開發工作中，我們需要進一步掌握使用 webpack 來優化前端資源加載的技巧，包括圖片處理、代碼壓縮、分離代碼和按需加載模塊等。在處理各種前端資源加載優化的問題時，要學會靈活地思考應用場景，將 webpack 提供的各種能力與實際項目中的實踐結合一起。當我們能夠自由地使用社區中的 loader 和 plugin 之后，我們可以嘗試進一步地去開發自己需要的 loader 和 plugin，來滿足更多項目中需要的特殊構建需求。 webpack 是個相當優秀的前端構建工具，webpack 優秀的開發者們和 webpack 本身強大的擴展能力造就了現在熱鬧非凡的 webpack 前端社區，周邊工具和產品非常多，這也是 webpack 最最核心的競爭力。我們可以利用 webpack 超級靈活的配置來幫助我們盡可能地去優化 webpack 的構建速度，但是這些努力可能會有一定的局限性，有的時候要學會跳出 webpack 構建工具，從另外的角度去思考問題，來幫助我們更好地解決實際項目中的問題。 ## 未來的展望 webpack 未來的一些發展方向和更新計劃也都在籌備中了，在 4.x 到 5.x 的一些預備特性中，不乏相當讓人期待的東西： * ESM 模塊導出支持 * 構建結果的持久緩存 * Preset 的支持，類似 Babel 的 [Preset](https://babeljs.io/docs/plugins/preset-env/) 來做預設的配置，實現更加靈活的零配置 * CSS 模塊類型的支持，可以用 CSS 文件作為入口 * HTML 模塊類型的支持，可以用 HTML 文件作為入口 * 自定義的代碼模塊類型 * 多線程的構建方式讓我們期待 webpack 越來越好。