序
Webpack 和 Babel 是前端工程領域最核心的兩大工具。我回想起，自己最初從事前端開發工作的時候，面對著技術論壇雜亂的 Webpack 和 Babel 資料，在很長一段時間內都感到迷惑與不解。
做前端開發工作的第一年，我被 Babel 的那堆 babel-preset-es2015、babel-preset-es2016、babel-preset-stage-0、babel-preset-stage-1、@babel/preset-env 和 @babel/plugin-transform-runtime 設定項目搞得暈頭轉向，經常問自己到底該用哪些設定項目，到底該怎麼設定。
我處於這種混亂的狀態整整一年之後，才漸漸對 Babel 有所認知，但是這種認知也很不全面。我從 Babel 6 到 Babel 7 學到的大量知識都是錯誤的和即將被淘汰的。這些零散的、錯誤的知識碎片增加了初學者的學習難度。
對於 Webpack，我差不多也曾處於一樣的狀態。在 2016 年年底，我第一次接觸到 Webpack，當時公司項目用的建構工具還不是 Webpack，而技術論壇內已經漸漸開始流行使用 Webpack 建構前端工程了。當時沒有完整的 Webpack 資料，官方檔案也不容易了解。於是我找了一些文章，嘗試學習，不過沒有學明白。這是因為 Webpack 是基於 Node.js 的，而我當時不會 Node.js，於是我又開始學習 Node.js。
幾年時間過去了，我對 Webpack 越來越熟悉。這中間走了很多彎路，舉例來說，為了掌握 Webpack 的正常設定而深入學習 Node.js，其實只需要會用幾個 Node.js 的模組函數就可以了，等等。
我覺得前端工程領域需要一本對新人友善的 Webpack 與 Babel 圖書，於是我將自己的技術網誌文章整理成了本書。我在本書中對網誌文章中的 Webpack 部分進行版本升級，本書使用的是 Webpack 5 版本，針對 Babel 部分還增加了原理和外掛程式開發的內容。本書是一本全方位地給初學者講解 Webpack 和 Babel 的圖書，希望可以幫助讀者成為更優秀的 JavaScript 開發者。
本書主要由 Webpack 和 Babel 兩大部分組成，Webpack 部分是第 1 章到第 8 章，Babel 部分是第 9 章到第 12 章。這兩部分內容相對獨立，讀者可以選擇自己感興趣的部分閱讀。
本書中主要使用的 Webpack 版本是 v5.21.2，但對 v5.0.0 之後的版本都適用；主要使用的 Babel 版本是 v7.13.10，但對 v7.0.0 之後的版本都適用，而且還對 Babel 版本的變化列出了詳細的說明。建議讀者安裝與書中版本一致的工具軟體，這樣可以減少 npm 套件版本帶來的差異。
本書使用的某些 npm 套件在未來可能因依賴升級而發生錯誤，這時可以透過將 x.y.z 版本編號中的 y 升級到最新版本來嘗試修正該錯誤。另外，因為 Webpack 生成 hash 值的演算法比較特殊，所以讀者在自己電腦上執行程式時生成的帶 hash 值的檔案名稱可能與書中不一樣。讀者在查看某些運行結果時，需要手動更改打包編譯後的檔案名稱。
在閱讀本書時，如果遇到有問題或錯誤的地方，可以在本書的 GitHub 程式倉庫 github.com/jruit/webpack-babel 上透過 Issue 回饋給我。
感謝關注我技術網誌（見連結16）的讀者們，你們的支持和讚譽給了我寫作本書的動力。
感謝張東東和孟津，你們在我還是一個新人時就給予了我很多幫助，一直激勵著我深入前端開發的學習。
最後，感謝付睿編輯，你在我寫作本書的過程中給予了我不少幫助，沒有你的耐心指導就沒有本書的出版。
姜瑞濤
