一、前言

  因為網頁應用程式不斷擴大、開發模式慢慢地被模組化設計取代，近期誕生了 Webpack，它可以在 JavaScript 生態系中，作為一個高度整合且完整之建置工具，優化程式的效能。

  我在培訓營時，也有接觸到 Webpack，但其中運作原理並不是非常理解，隨著步入職場，因應工作需求，自行進修後將學習到的用簡單圖文方式紀錄於此，與大家分享。

二、Webpack 之運作三階段

1. 來源(Entry)

  係所有資源的起始點，運作原理是以 Entry 這個模組的相依關係，解析出整個應用程式的相依關係圖。

2. 處理(Mode)

  經過上一階段「來源(Entry)」的運作，會在此時進行所有資源對應之處理。而其最佳化設定會依 Mode 屬性而有所不同。Mode 屬性有 production、development與none三種，主要是目標環境的不同。

3. 輸出(Output)

  有來源自然就會有輸出。在第一階段我們告訴 Entry 模組的相依性，經過第二階段處理後，在這個最後階段，設定輸出的位置與方式。

三、結論與自我鼓勵

• 參考書籍：從0到Webpack
• 參考影音教學：Webpack5 快速入門

  以上參考資源如果大家有興趣，推薦先看「從0到Webpack」系列文章或支持作者書籍，再看「Webpack5 快速入門」之影片教學實做一次，會更理解運作原理！

  總結此篇文章，其實大家可以將 Webpack 視為現代 JavaScript 應用程式的模組綑綁器，所有資源進到 Webpack 中都會變成模組，在建置過程中的各個階段會以特定方式進行處理，最後輸出結果。

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