搭配上一篇文章有提到 Webpack 之運作階段，接下來需要了解在每個階段又是如何運作的。
| 階段 1 | 階段 2 | 階段 3 | |
|---|---|---|---|
| 階段名稱 | 來源(Entry) | 處理(Mode) | 輸出(Output) |
| 對應資源 | 模組(Module) | 轉變(Chunk) | 呈現(Bundle) |
| 流程 1 | 流程 2 | 流程 3 | 流程 4 | 流程 5 |
|---|---|---|---|---|
| 啟動 Webpack(mode) | 找到入口(entry) | 建構相依圖(dependency graph) | 建置(bundle) | 輸出(output) |
執行 Mode 對應的最佳化方案。
找到起始模組的入口。
又拆分為解析模組(loaders)與搜尋下層依賴模組。找到依賴模組後，回上一步解析模組，沒有下層即結束搜尋。
應該有越學越有趣了吧？我的文章較偏初淺，希望和我一樣靠自學也能有定期的幫助～後面再加深學習就會更有動力與認知唷！
本文同步發佈於我的個人網站 Annie Code Life
iThome鐵人賽
看影片追技術