Loading...

Webpack 是什麼?Webpack 是一個「模組打包工具」。你可能又會接著問,那什麼是模組?什麼是打包?這篇文章我們會由淺入深地理解這些問題,並了解 Webpack 的用途及它的基本觀念。

模組化

相信大家都有過這樣的經驗,在剛學習前端開發時,總是一支 JavaScript 做到底,把所有的邏輯都塞在同一支檔案裡。

若是小型的 side project,可能還不是什麼大問題,但如果使用這種方式在比較大型的專案中,隨著需求不斷的迭代下,日積月累很可能就會變成一支幾千幾萬行程式碼的大怪物,然後讓接手這份程式碼維護的團隊成員要處理這樣痛苦的技術債。

因此為了方便團隊協作與維護專案,現今的網頁專案大多會採用模組化的方式,將所有的 JavaScript 程式碼,依照功能切成一個個的小模組(module),方便組織與管理。

打包

那有了模組化之後,最後我們要將這麼多個小模組組合起來部署到線上,就需要將他們「打包」起來。

什麼是打包?這裡借用 Webpack 的圖片來說明,左邊的部分就是我們在專案中的許多模組,這些模組依照各自負責的功能會切分成各組父子組件互相依賴,而如何解析這些依賴關係並把最後的結果輸出到右邊的幾支檔案,這件事就是打包要做的事。

另外為了讓專案更容易開發,你可能會還需要做以下這些事:

  • 在前端中使用其他人開發好的 NPM 套件。
  • 使用 ES6 以上許多方便的 JavaScript 語法。
  • 使用 SCSS、less 這些 CSS 預處理器來寫 CSS。
  • 將各種類型的檔案(圖片、CSS)引入 JavaScript 中。

而為了要將模組打包、轉譯各種預處理器的語法,我們需要一個工具來幫忙處理這些麻煩事,這個工具就是 Webpack。

延伸閱讀:NPM是什麼?了解Node Package Manager套件管理機制

什麼是 Webpack?

Webpack 是一個模組打包工具(module bundler)。

它會從進入點(Entry point)開始分析專案結構,以上圖的例子是 main.js ,找出每個模組間的依賴關係,並分析其中是否有瀏覽器不能直接使用的語法(ES6 語法、SCSS 等),甚至檢查程式碼中是否有引入 CSS、圖片檔等,將他們轉換並打包在一起,最後產出瀏覽器可以識別的檔案,方便我們部署到線上。

Webpack 的更多用途

而 Webpack 對模組又做了更廣泛的定義,除了 JavaScript 模組外,任何檔案類型像是 CSS、圖片等資源也都被當成模組。

這些廣義的模組,在 Webpack 中可以利用各種 loader 來識別檔案類型並轉譯成瀏覽器看得懂的語法。像是可以做 Babel 設定來轉譯 JavaScript ES6-ES11 的語法,或者轉換 SCSS 或 less 這些 CSS 預處理器語法,或載入專案中的各種圖檔格式。

甚至我們可以透過 NPM 安裝許多第三方的套件,像是 Bootstrap、Font Awesome、Day.js 等等,直接在專案中引入使用。

另外,Webpack 也可以在打包的過程中透過一些工具稱為 plugin 來做到程式碼優化的工作(minify、uglify)。

而現今一些前端框架的 CLI 工具像是 create-react-app 或 Vue CLI,都整合了 Webpack 將專案的打包工作做好通用的預設設定,簡化了許多開發者這部分的負擔,並可以無痛的使用這些框架來有效管理程式碼。

而學習 Webpack 並瞭解它是如何運作的,也將能讓我們更有彈性的調整這些預設設定。

專業前端工程師養成,有系統學習使用Webpack、CSS預處理器

Webpack 基本觀念

上面了解了 Webpack 的各種用途後,最後我們以更深入的方式來整理幾個關於 Webpack 工作方式的基本觀念。

Entry point

從上圖中可以看到會由一個進入點開始,從這個檔案開始找到其他的相關檔案(dependency)。

Webpack 預設的進入點是 src/index.js,可以隨專案調整,也可以設定多個進入點。

Output

輸出指的是 Webpack 在 build 完之後產生的靜態檔結果,預設被放在 dist/ 底下。

這些被輸出的檔案也可被稱為 bundle。

Loader

前面提到 Webpack 可以打包的東西不只是 JS,也可以打包其他諸如 CSS、圖片、文件等資源,而這些就需要藉由 Loader 來處理,只要將這些種類的檔案透過 loader 轉為 module,就能讓專案方便的直接引入。

Plugin

Plugin 是第三方的擴充套件,可以補強一些 Webpack 的功能,舉例像是有些 plugin 可以拿來 uglify、minify、移除未使用的 CSS(PurgeCSS)等,更多的 plugin 可以參考 awesome-webpack 的 plugin list

其他

另外,在 Webpack 中也可以依照專案進程,切分兩種模式分別是 development 與 production,來分別對開發中的專案或未來上線的版本做設定上的區分。

而強大的 Webpack 除了這些基本的操作外,還可以做到更多事,像是將輸出的 bundle 切成更小的 chunk、模組的動態載入等。

其他相似工具

除了 Webpack,你可能還有聽過其他相似的工具像是 Parcel、Rollup,或甚至一些任務流程管理工具像是 Gulp、Grunt 等,乍聽之下這麼多五花八門的工具可能會讓前端開發者覺得「老子學不動了」。

這些工具都有各自的優缺點與想解決的問題,但其實核心的概念是差不多的,所以只要熟悉其中一套後,未來碰到其他更新穎的工具其實都大同小異,相信都能很快上手。

結論

最後統整一下,在這篇文章中我們從模組化、打包來了解 Webpack 的用途,並深入理解 Webpack 的工作方式。

而 Webpack 自 2012 年發展至今,已經是個非常複雜的工具,但我們不需要因為各種沒看過的設定而恐慌。只要透過掌握最基本的概念,未來不管碰到任何種類的設定需求,再 google 查詢或參考官方文件來設定即可。

延伸閱讀

這篇文章中並沒有提到太多關於 Webpack 的實務操作,對這部分有需求的讀者可以參考以下資源:

其他 Webpack 教學可參考

關於 JavaScript 模組化的歷史脈絡及內容可參考

3分鐘小測驗,找到你的前端開發學習入口

(本文作者是 ALPHA Camp 的助教 前端工程師 Dez)

成為企業渴求的程式人才!

在家學會 JavaScript 網路開發

全新「全端 Web App 開發」課程,給你看得見的學習成效!
超過 90% 轉職成功,400 位來自亞洲各國的 ALPHA Camp 校友,畢業後達成轉職、創業、出國工作的夢想!

3 分鐘選課指南

給期待創新改變的你

前端x後端x全端 完整工程師技能樹

90% 學生轉職成功,職涯競爭力更上層樓
最專業的「全端 Web App 開發」課程,上班族邊工作也能同時培養第二專長!

3 分鐘選課指南

學期一|程式設計入門

零基礎也學得會的程式入門課!

開始學帶得走的技能,為自己未來的成長鋪路

學期二|掌握網頁開發

系統化學習 JavaScript

實作打好前後端基礎,成為扎實的網頁開發者

學期三|軟體工程師養成

養成業界接軌的實戰能力

前端/全端工程師專修路徑,完成技能與求職準備,成為業界即戰力