iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
自我挑戰組

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

Day26:【技術篇】Webpack5 - Webpack之運作階段

一、前言

  因為網頁應用程式不斷擴大、開發模式慢慢地被模組化設計取代,近期誕生了 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 快速入門」之影片教學實做一次,會更理解運作原理!

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


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


上一篇
Day25:【技術篇】JavaScript 套件 - classnames
下一篇
Day27:【技術篇】Webpack5 - Webpack 之運作流程
系列文
新手全端工程師的職場成長歷程30

1 則留言

0
kk00915
iT邦新手 5 級 ‧ 2021-10-12 23:08:30

就從你推薦的開始看起!!

我要留言

立即登入留言