---
# System prepended metadata

title: Webpack 操作工作坊
tags: [學期 3]

---

###### tags: `學期 3`

# Webpack 操作工作坊

<div style="position: relative;width:100%;height:0;padding-bottom: 56.25%;">  <iframe style="position:absolute;top:0;left:0;width:100%;height:100%" src="https://player.vimeo.com/video/438407693" frameborder="0" allowfullscreen></iframe></div>

<div style="line-height:16px;"></div>

當專案變得複雜以後，我們需要將專案「模組化」，以便組織管理。要進行模組化時，就需要像 Webpack 這種「打包工具 (module bundler)」。

Webpack 可以把分拆成不同模組的專案，轉換成「瀏覽器看得懂的內容」，方便我們部署網站。

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13377/ExportedContentImage_00.png"></a></div>

除此之外，Webpack 還有各式各樣的功能，也可以做到程式碼優化。

Webpack 通常已經整合在前端框架的內部，單獨應用的場景不多，但瞭解 Webpack 非常有助於瞭解框架的底層運作，幫助你對網站開發建立更深入的認知。

在本次工作坊中，我們會以專案【網紅廣告平台】為例，讓你具體觀察模組化的前後差異。

工作坊內容包括：

- Webpack 與模組化觀念釐清
- 案例：模組化前後對照（[before](https://github.com/ALPHACamp/webpack-part1-before) <> [after](https://github.com/ALPHACamp/webpack-part1-after))
- 從零打造 Webpack 專案

----

### Webpack 簡介

#### 為什麼需要打包？

Webpack 的功能是「打包專案」，而為什麼需要打包？最主要的原因是我們需要將專案「模組化」。

簡單來說，可以想像若像是 Facebook 這樣複雜的網頁，若它只用一隻 JavaScript 寫到底，那可能程式碼已經幾百萬行了。因此為了方便團隊協作與維護專案，現今的網頁專案大多會採用模組化的方式，將各個功能的 JavaScript 程式碼切成許多模組（module），方便組織與管理。

若你對於「模組化」這件事不了解，建議可以參考<a href="https://blog.huli.tw/2020/01/21/webpack-newbie-tutorial/" target="_blank">這篇胡立的文章</a>了解脈絡。

為了讓專案更容易開發，你可能會需要這樣做：

* 模組化：將 JavaScript 按照不同功能切成許多檔案。
* 在前端中使用其他人開發好的 NPM 套件。
* 使用 ES6 以上許多方便的語法。
* 使用 SCSS、Less 這些 CSS 預處理器方便管理 CSS。
* 將各種類型的檔案（圖片、CSS）引入 JavaScript 中。

基於以上諸多原因，我們需要一個工具來幫忙處理這些麻煩事，而這個工具就是 Webpack。

#### 什麼是 Webpack？

Webpack 是一個模組打包工具（module bundler），它會分析專案結構，尋找各個 JavaScript 模組，並分析是否有瀏覽器不能直接使用的語法（ES6-ES11 語法、TypeScript 等），甚至檢查專案中是否有引入 CSS、圖片檔等，將他們轉換並打包在一起，最後產出瀏覽器可以識別的檔案，方便我們部署到線上。

#### Webpack 的用途

Webpack 對模組又做了更廣泛的定義，除了所有的 JavaScript 模組外，像是 CSS、image 之類的資源也可以一起打包。

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

另外，Webpack 在打包時，還可以做一些設定來轉譯瀏覽器看不懂的語法。像是可以做 Babel 設定來轉譯 JavaScript ES6-ES11 的語法，或者轉換 SCSS 或 Less 這些 CSS 預處理器語法。

Webpack 也可以在打包的過程中透過一些工具來做到程式碼優化的工作（minify、uglify）。

而現今一些前端框架的 CLI 工具像是 create-react-app 或 Vue CLI，都整合了 Webpack 將專案的打包工作做好通用的預設設定，簡化了許多開發者這部分的負擔。學習 Webpack 並瞭解它是如何運作的，也將能讓我們更有彈性的調整這些預設設定。

#### Webpack 基本觀念

在我們實際動手操作 Webpack 前，先來了解幾個 Webpack 的基本觀念。

<div style="width:100%"> <a href="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png" target="_blank"><img style="max-width:700px;width:100%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/13378/ExportedContentImage_01.png"></a></div>

首先我們要了解 Webpack 的工作方式，從上圖中可以看到會由一個進入點開始，從這個檔案開始找到其他的相關檔案（dependency），透過 loader 來處理這些檔案，最後打包成一個或多個的輸出檔案。

##### Entry point

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

##### Output

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

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

##### Loader

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

##### Plugin

Plugin 是第三方的擴充套件，可以補強一些 Webpack 的功能，舉例像是有些 plugin 可以拿來 uglify、minify、移除未使用的 CSS（PurgeCSS）等，更多的 plugin 可以參考 <a href="https://github.com/webpack-contrib/awesome-webpack#webpack-plugins" target="_blank">awesome-webpack 的 plugin list</a>。

##### Mode

Webpack 有兩種模式分別是 development 與 production，兩者的差別是 production 模式預設會將 JavaScript 程式碼做 minify 和其他優化。

--

#### 工作坊參考資料
##### 投影片

<div style="position: relative;width:100%;height:0;padding-bottom: 55%;"><iframe style="position:absolute;top:0;left:0;width:90%;height:90%" src="https://docs.google.com/presentation/d/e/2PACX-1vTdyCPW8WI325GnPfmWeRnpKmUJdEe5nq4WamJCxSjPC8_lhVa0fjaE4LE_uVKCc2cfNL_GZ_Sdzy2k/embed?start=false&loop=false&delayms=3000" frameborder="0" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div>


