由於採用 SCSS 把整體的 CSS 語法依功能、佈局的區塊拆分為許多小的 .scss 檔案。JavaScript 也採用模組化的方式，最後的成品勢必要打包成單一個檔案，以便於前端使用時直接引入。

方案考量

在進行打包時，我們會在 package.json 的 scripts 欄位編寫打包指令。這個欄位是一個陣列，我們可以自定許多指令，然後使用例如以下的指令去打包檔案：

圖 a: Swiper 套件的打包指令列表

上圖為 「Swiper 套件」的 package.json 中，關於 scripts 的區塊，它為了支援許多不同的前端框架，獨立寫了非常多專案特定框架的打包指令，例如以下打包 React Component 的指令。

npm run build:react 

這個指令來打包成 React Component，而在範例圖片中每一個指令都是獨立的 Node.js 的檔案。很多受歡迎的大型開發源碼專案都是採這樣的方法，來因應各式各樣的環境支援。

今天筆者想分享的是更簡單、便利，適合小小專案剛起步的打包方式，也就是 Webpack。等於是把複雜的事都交給 Webpack，我們不用去管之間的過程，專注於過開發的過程以其最終的成果就好。

安裝

首先安裝，Webpack 套件的本體以及命令列模式套件。

npm install webpack --save-dev
npm install webpack-cli --save-dev

設定檔

【查看範例 24-1】

第 1 至 3 行：依賴的套件的匯出方式是 CommonJs，因此必須使用 require 語法載入。
第 5 號：匯出的目標目錄
第 6 行：載入準備要打包的檔案。

這一份設定檔主要的用途是分析第 6 行準備一起打包的檔案種類，再使用 Webpack 外掛分門別類匯出到目標目錄，所以接下來還有一些 Webpack 外掛還依賴的套件必須安裝。

optimization

第 9 行至 16 行：optimization 是針對打包後的檔案最小化的設定。需要「terser-webpack-plugin」套件。

entry

第 17 至 19 行：entry 是入口檔案的設定，可設定多個入口檔案，不過目前這個作品只有一個。假如日後要支援不同的套件例如 React、jQuery 等等，可以再添加進來。

output

第 20 至 22 行：output 匯出的檔案命稱。這裡的 [name] 為變數，為 entry 裡的 key 值。

module

第 23 行：module Webpack 的模組功能，提供打包功能額外的格式支援。

module.rules

第 24 行：rules 為套用 Webpack 模組功能的規則設定。
第 26 行：test 為打包的檔案中，其傅副檔名的規則比對，如下。

第 28、43 行：use 為符合 test 規則成功後，所使用的模組設定。
第 30 行：loader 模組名稱。

plguins

第 60 至 64 行：plguins Webpack 的外掛功能，提供額外的打包功能支援。這個例子是載入 miniCssExtractPlugin，使用它的 loader 在第 45 行，為 CSS / SASS / SCSS 檔案做最小化處理，並自定義打包後的目標檔案位置。這裡的 [name] 為變數，為 entry 裡的 key 值。

安裝依賴套件

據我們的設定檔配置，以下的套件為必須安裝的依賴套件。

terser-webpack-plugin

npm install terser-webpack-plugin --save-dev

用來將打包後的檔案進行最小化的外掛。

mini-css-extract-plugin

npm install mini-css-extract-plugin --save-dev

使用它的 loader 在為 CSS / SASS / SCSS 檔案做最小化處理，並自定義打包後的目標檔案位置。

sass

npm install sass --save-dev

用來解析 SASS / SCSS 語法，並翻譯成 CSS 語法的套件。

babel-loader

npm install babel-loader --save-dev
npm install @babel/preset-env --save-dev

讓打包的 JavaScript 檔案支援 ES6 import 語法。

url-loader

npm install url-loader --save-dev

支援從遠端網址取得打要打包的檔案。

css-loader

npm install css-loader --save-dev

支援打包 CSS 檔案。

sass-loader

npm install sass-loader --save-dev

支援打包 SASS / SCSS 檔案。

打包指令

在 package.json 檔案中，加入打包用的指令。

【查看範例 24-2】

上圖是今天的文章的打包指令：

正式環境

npm run build

圖 b: 打包正式環境要用的最小化檔案

打包成檔案內容都是經過最小化壓縮過，Production 環境使用的 JS、CSS 檔案。

開發環境

npm run watch

圖 c: 監看檔案變化，即時進行非最小化打包

進行開發中，Webpack 一發現檔案內容有所變更，立即打包成未經最小化壓縮過的檔案。也是開發環境在用的選項。

總結

使用 Webpack 來打包模組化的 JavaScript 及 CSS 檔案，是蠻有效率的方式，而且其官網上的文件說明很詳細，社群上的支援也很活躍，是我們在處理網站靜態檔案的好幫手喔。

開發環境都準備好了，鐵人賽也進入尾聲了。從 Day 25 開始，進行我們的 Slider 套件的基本功能開發。

文中範例可在 GitHub Page 閱讀。
原始碼可在 2022 鐵人賽專用 GitHub Repo 下載。