使用 webpack 定製前端開發環境

知識 07-26

隨著互聯網大潮的興起，web 項目複雜度上升，前端社區蓬勃發展，前端構建已經是開發工作中一個繞不開的話題。上圖羅列了前端的很多東西，除了一些類庫，其他基本都和構建有一定的關係。

在前端舊時代，JavaScript 本身就缺乏模塊化相關規範的支持，而現今也並非所有瀏覽器都支持新的 JavaScript Module，所以在前端構建中，代碼模塊打包幾乎就是最重要的一部分。

上圖簡單地比較了當前前端社區比較流行的四個模塊打包工具 — webpack、browserify、rollup、parcel-bundler 2018 年 1 月 npm 包下載量和 GitHub stars 數量，很明顯，webpack 可以說是最為人所知，使用量最大的一個。

從 GitHub 的 webpack 代碼倉庫的 master 貢獻圖來看，webpack 從 2012 年開始，主代碼倉庫都相當活躍，尤其是 2017 年，更是有了巨大的變化。

期間，webpack 經歷了幾個主要版本變更，從開始火熱的 1.x 版本，經過了 2.x，3.x，走到了現在還在成長中的 4.x 版本，webpack 在不斷地完善中。整個 webpack 社區一直是相當活躍的，周邊相關的插件等基本覆蓋了前端日常開發工作所需，隨時代發展，也添加了不少新特性，如 tree-shaking 等。

至今，webpack 已經成為家喻戶曉的前端打包工具，是當前可以使用的前端代碼模塊打包工具中最具代表性的一個。

使用過 webpack 的都了解，webpack 本身具備了諸多優點：從單一入口出發，打包所有前端資源，使用 loader 處理多種代碼語言的轉換，使用 plugin 擴展原有的模塊打包流程，使用 HMR 提升開發體驗，利用代碼壓縮和代碼分割來提升前端載入性能等。

我們可以發現，在大多數項目中，webpack 已經可以成為構建工作的主心骨，應該具備的功能都已經具備，對 webpack 的了解幾乎成了前端開發人員必不可少的技能之一。

但是一直以來，webpack 文檔說明為人所詬病，由於 webpack 本身功能就具備一定的複雜性和自由度，文檔總是難以面面俱到（3.x 版本已經改善了相當多，4.x 的文檔還在努力準備中），部分細節沒有深入，也比較少去講述 webpack 面向具體構建需求時的使用。同時，webpack 源碼的可讀性一般，開發者遇見問題時難以開發調試，普遍停留在 webpack 的基礎使用上，不敢大刀闊斧地用來定製舒服的開發流程。

我們可以在社區中找到很多關於 webpack 的文章，有不少相當實用的，可以幫助新手快速入門 webpack，也有不少相當深入的，可以從某一層面剖析如何更好地使用 webpack，但總歸是零零散散，缺乏一個相對系統化的 webpack 學習指南。