iT邦幫忙

2021 iThome 鐵人賽

DAY 27
1
自我挑戰組

新手全端工程師的職場成長歷程系列 第 27

Day27:【技術篇】Webpack5 - Webpack 之運作流程

一、前言

  搭配上一篇文章有提到 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)上註冊各種處理函式,在執行時觸發其設定的工作。

四、結論與自我鼓勵

  應該有越學越有趣了吧?我的文章較偏初淺,希望和我一樣靠自學也能有定期的幫助~後面再加深學習就會更有動力與認知唷!


本文同步發佈於我的個人網站 Annie Code Life


上一篇
Day26:【技術篇】Webpack5 - Webpack之運作階段
下一篇
Day28:【技術篇】ASP DOT NET CORE 的 MVC 基礎入門
系列文
新手全端工程師的職場成長歷程30

1 則留言

0
kk00915
iT邦新手 5 級 ‧ 2021-10-12 23:09:18

真的豪~有趣

我要留言

立即登入留言