一、前言
搭配上一篇文章有提到 Webpack 之運作階段，接下來需要了解在每個階段又是如何運作的。
二、Webpack 之運作三階段
| 階段 1 | 階段 2 | 階段 3 | |
|---|---|---|---|
| 階段名稱 | 來源(Entry) | 處理(Mode) | 輸出(Output) |
| 對應資源 | 模組(Module) | 轉變(Chunk) | 呈現(Bundle) |
三、Webpack 之運作流程
| 流程 1 | 流程 2 | 流程 3 | 流程 4 | 流程 5 |
|---|---|---|---|---|
| 啟動 Webpack(mode) | 找到入口(entry) | 建構相依圖(dependency graph) | 建置(bundle) | 輸出(output) |
1. 啟動 Webpack(mode)
 執行 Mode 對應的最佳化方案。
2. 找到入口(entry)
 找到起始模組的入口。
3. 建構相依圖(dependency graph)
 又拆分為解析模組(loaders)與搜尋下層依賴模組。找到依賴模組後，回上一步解析模組，沒有下層即結束搜尋。
4. 建置(bundle)
5. 輸出(output)
6. 上述每一步驟都有事件鉤子(hooks)，plugins 可以在這些事件鉤子(hooks)上註冊各種處理函式，在執行時觸發其設定的工作。
四、結論與自我鼓勵
- 參考書籍：從0到Webpack
應該有越學越有趣了吧？我的文章較偏初淺，希望和我一樣靠自學也能有定期的幫助～後面再加深學習就會更有動力與認知唷！