一、前言
因為網頁應用程式不斷擴大、開發模式慢慢地被模組化設計取代，近期誕生了 Webpack，它可以在 JavaScript 生態系中，作為一個高度整合且完整之建置工具，優化程式的效能。
我在培訓營時，也有接觸到 Webpack，但其中運作原理並不是非常理解，隨著步入職場，因應工作需求，自行進修後將學習到的用簡單圖文方式紀錄於此，與大家分享(應該會有續集！)。
二、Webpack 之運作三階段
| 階段 1 | 階段 2 | 階段 3 |
|---|---|---|
| 來源(Entry) | 處理(Mode) | 輸出(Output) |
1. 來源(Entry)
係所有資源的起始點，運作原理是以 Entry 這個模組的相依關係，解析出整個應用程式的相依關係圖。
2. 處理(Mode)
經過上一階段「來源(Entry)」的運作，會在此時進行所有資源對應之處理。而其最佳化設定會依 Mode 屬性而有所不同。Mode 屬性有 production、development與none三種，主要是目標環境的不同。
3. 輸出(Output)
有來源自然就會有輸出。在第一階段我們告訴 Entry 模組的相依性，經過第二階段處理後，在這個最後階段，設定輸出的位置與方式。
三、結論與自我鼓勵
- 參考書籍：從0到Webpack
- 參考影音教學：Webpack5 快速入門
以上參考資源如果大家有興趣，推薦先看「從0到Webpack」系列文章或支持作者書籍，再看「Webpack5 快速入門」之影片教學實做一次，會更理解運作原理！
總結此篇文章，其實大家可以將 Webpack 視為現代 JavaScript 應用程式的模組綑綁器，所有資源進到 Webpack 中都會變成模組，在建置過程中的各個階段會以特定方式進行處理，最後輸出結果。