書籍「從 0 到 Webpack 」範例集

此庫為「從 0 到 Webpack 」一書的範例集。

本書可以在下面的連結中找到：

• 天瓏書局
• 博客來

「從 0 到 Webpack 」是本介紹 webpack 的專書。

補漏

• 頁數 2-25 「使用 DevServer 」小節的最後應該要加上「可以參考範例 ch02-getting-started/02-first-webpack/dev-server 」。
• 頁數 3-3 「使用配置物件」小節的第一個程式碼區塊應與最後一行 npx webpack --config webpack.config.demo.js 分為兩個區塊。
• 頁數 3-70 最上方的程式碼區塊在 // ch03-configuration/06-module-use/use-func/src/hello.js 之前與之後應該分為兩個區塊。
• 頁數 3-83 「配置 Plugins 的正確姿勢」小節中的 awesome webpack 連結應為 https://webpack.js.org/awesome-webpack/#webpack-plugins 。
• 頁數 3-136 「 optimization.usedExports 」小節的最後應該要加上「可以參考範例 ch03-configuration/11-optimization/used-exports 」。
• 頁數 4-15 最上方的 post-loader 應改為 postcss-loader 。
• 頁數 5-6 「配置改變時自動建置」小節的最後應該要加上「可以參考範例 ch05-optimization/01-development/reload-config 」。
• 頁數 5-41 「輸出資訊」小節段落「從而針對問題做解決」下面應要加上「可以參考範例 ch05-optimization/05-production-analyze/cli-args 」。
• 頁數 5-42 「輸出資訊」小節的最後應該要加上「可以參考範例 ch05-optimization/05-production-analyze/cli-args-json 」。
• 頁數 5-44 「警示 bundle 過大」小節的最後應該要加上「可以參考範例 ch05-optimization/05-production-analyze/bundlesize-demo 」。

範例目錄

第一章：寫在 webpack 之前

任何技術的誕生都有其原因。

第一節：網頁應用程式架構的變遷

網頁渲染的工作逐漸由後端轉為前端主導。

介紹網頁應用程式因為時代的演進所形成的架構變化。

第二節： JavaScript 的模組化之路

JavaScript 逐漸從腳本由上而下的執行方式演進為具有模組化設計的程式語言。

由於 JavaScript 的專案規模增大，而促使原本腳本式的寫法向模組化的趨勢前進。

頁數	範例	描述
1-15	inline-script	JavaScript 內嵌於 HTML 中的 <script> 標籤
1-15	script-tag	使用 <script> 的 src 屬性引入外部 JavaScript
1-16	scope	在內嵌的 <script> 中使用外部 JavaScript 定義的變數，展示 JavaScript 腳本式引入方法的全域特性
1-16	var-conflict	演示在全域中定義的變數互相覆蓋的問題
1-17	iife	演示使用 IIFE 處理內部變數衝突
1-18	implicit-import	演示在使用隱性引入時所潛藏的引用錯誤問題
1-18	import-order	演示 <script> 順序錯置所產生的問題
1-22	common-js	演示使用 CommonJS 的導出與導入模組
1-23	require-js	演示使用 RequireJS 的導出與導入模組
1-24	es-module	演示使用 ES Module 的導出與導入模組

第三節：新技術的崛起

因應網頁使用規模擴大，許多新技術被發明以增進開發效率。

許多新技術與發明出現在網頁開發中。

頁數	範例	描述
1-28	babel	演示使用 Babel 將新的 JavaScript 語法轉為舊語法
1-29	postcss	演示使用 PostCSS 將新的 CSS 語法轉為舊語法
1-30	type-script	演示使用 TypeScript 為程式帶來型別檢查
1-31	sass-example	演示使用 SASS 語法經由轉譯後變為一般的 CSS 語法
1-33	emotion	演示使用 Emotion 在 JavaScript 中撰寫 CSS 樣式
1-35	pug	演示使用 Pug 作為 HTML 的模板引擎
1-35	vue-template-syntax	演示使用 Vue.js 的模板語法撰寫 HTML
1-36	react-jsx	演示在 JavaScript 內使用 JSX 配置 HTML 的生成

第四節：提升網頁效能

減少等待，增加效率。

針對不同的環境，所需的處理也有所不同，生產環境就是執行的效率優先，而開發環境則是以能提升開發效率的功能為優先。

頁數	範例	描述
1-39	min	使用壓縮後的 .min.js 程式碼，減少請求的負擔
1-40	redundant-import	演示多餘的載入會增加請求的時間
1-40	partial-use	演示只載入欲使用的程式碼可以減少請求的時間
1-42	multiple-import	演示多次載入會損耗請求的效率
1-43	single-page	演示單頁應用可能載入不必要的資源
1-44	single-page-async	演示當要使用資源時，再以延遲載入的方式請求資源，以此減少無用的請求

第五節：各類工具的出現

各類工具幫助開發者構築自動化流程。

由於前面幾節所介紹的改變發生，網頁應用也需要依賴工具的幫助來增加效率。

頁數	範例	描述
1-51	npm-scripts	演示使用 npm 的 package.json 中的 scripts 屬性配置建置／執行流程
1-52	gulp-example	演示使用 Gulp 建立建置／執行流程
1-54	browserify	演示使用 Browserify 轉換 JavaScript 的 CommonJS 模組變為可執行於瀏覽器的原生語法
1-55	gulp-browserify	演示 Gulp 與 Browserify 搭配的使用方式，將 Gulp 作為任務執行器， Browserify 作為模組綑綁器

第二章：認識 webpack

學習 webpack 的基礎概念與配置方式。

第二節：第一個 webpack 應用程式

本節以實作的方式展示 webpack 的各項主要功能。

頁數	範例	描述
2-13	simple-app	使用原始的腳本式 JavaScript 寫成的範例
2-18	zero-config	將 simple-app 修改為使用 webpack 建置
2-21	load-style	使用 loader 為 zero-config 載入樣式表
2-23	copy-html	使用 plugin 為 load-style 複製 HTML 至 bundle 目錄
2-25	use-mode	使用 webpack 的模式設定 copy-html 的最佳化方案
2-26	dev-server	使用 DevServer 做為 use-mode 開發伺服器

第三節：安裝 webpack

本節介紹如何安裝 webpack 。

頁數	範例	描述
2-29	local-install	安裝 webpack 後的專案
2-29	install-specific-version	安裝特定版本 webpack 後的專案
2-29	update-webpack	更新 webpack 前的專案
2-31	latest-version	安裝尚未釋出的 webpack 版本
2-31	specific-branch	安裝特定 branch 的 webpack
2-31	specific-tag	安裝特定 tag 的 webpack

第四節：使用 webpack

使用 CLI 與配置文件操作 webpack 。

頁數	範例	描述
2-36	cli-config	使用 CLI 參數配置 webpack
2-38	config-file	使用配置檔設定 webpack
2-39	cli-plus-file	CLI 參數與配置檔一起使用設定 webpack

第五節：使用 Loaders

講解 Loaders 的使用方式。

頁數	範例	描述
2-44	loader-css-inline	將 loader 使用 inline 的方式載入樣式表
2-45	loader-style-inline	將複數 loader 使用 inline 的方式載入樣式表並自動插入 DOM 中
2-46	css-module-inline	使用 inline 參數設定 loader
2-47	css-module	使用配置檔設定 loader
（未收入）	loader-css	將 loader 使用配置檔的方式載入樣式表
（未收入）	loader-style	將複數 loader 使用配置檔的方式載入樣式表並自動插入 DOM 中

第六節：使用 Plugins

講述如何配置 plugins 。

頁數	範例	描述
2-50	use-config	配置檔中設定 plugin
2-51	multiple-plugins	設定複數個 plugin
2-52	internal-plugins	使用 webpack 內建的 plugin

第七節：使用 DevServer

介紹 DevServer 與它的使用方式。

頁數	範例	描述
2-55	dev-server	演示 DevServer 預設的自動重整功能
2-55	dev-server-config	使用 DevServer 作為開發伺服器，並使用配置檔設定 Hot Module Replacement
2-56	dev-server-auto	使用 CopyWebpackPlugin 使建置流程包含 index.html ，避免需要配置 contentBase

第三章：配置 webpack

深入講解配置中的各個選項功能。

第一節：配置物件

配置物件為設定 webpack 的主要手段。

頁數	範例	描述
3-3	config-file	使用 CLI 載入導出配置物件的配置檔
3-3	node-api	使用 Node.js API 載入配置物件
3-8	webpack-init	可以啟動 webpack init 產生 created-by-webpack-init 專案的專案
3-8	created-by-webpack-init	由 webpack init 所產生的專案，說明請參考範例 webpack-init

第二節：入口 Entry

講解 webpack 配置項 entry 的使用方式。

頁數	範例	描述
3-10	entry-default	預設的 entry 配置
3-11	entry-string	使用字串設置 entry
3-12	entry-array	使用陣列設置多個入口
3-13	entry-object	使用物件以指定的 key 值設定不同的入口，並以 key 為區別輸出複數個 bundle
3-14	entry-object-array	使用物件以指定的 key 值配置有名稱的 bundle ，並以陣列設定多個入口
3-15	entry-object-object-string	以物件為物件的值時， import 屬性可以設定入口點
3-15	entry-object-object-array	以物件為物件的值時， import 屬性以陣列設定多個入口點
3-15	entry-object-object-filename	以物件為物件的值時， filename 屬性可以設定 bundle 的檔案名稱
3-16	entry-object-object-depend-on	以物件為物件的值時，使用 dependOn 設定相依資源
3-17	entry-object-object-runtime	以物件為物件的值時，使用 runtime 屬性提取 runtime 的程式碼為獨立的檔案
3-19	entry-func	使用函式設定 entry ，延遲入口點的載入時機
3-19	entry-func-array	使用函式設定 entry ，並且以陣列為回傳值，延遲多個入口點的載入時機
3-20	entry-func-promise	使用函式設定 entry ，並且傳回 promise ，以非同步的方式載入入口點
3-20	diff-type-entry	設定非 JavaScript 類型的入口點
3-21	context	使用 context 設定基底路徑

第三節：輸出 Output

講解 webpack 配置項 output 的使用方式。

頁數	範例	描述
3-23	output-default	預設的 output 配置
3-24	output-path	使用 output 的 path 屬性設置輸出目錄
3-25	output-path-hash	以 [fullhash] 設定輸出目錄
3-26	output-filename	使用 output 的 filename 設定輸出的 bundle 名稱
3-27	output-filename-multi	使用 template string 設定多個輸出時的 bundle 名稱
3-28	output-filename-func	使用函式決定輸出的 bundle 名稱
3-29	output-filename-template	以不同的 template string 展示輸出的 bundle 名稱
3-32	output-filename-hash	比較不同的 hash template string 所輸出的值
3-35	output-publicpath	以 publicPath 設定伺服器中請求的位置
3-27	output-chunkfilename	以 chunkFilename 設定 non-initial 的名稱

第四節：解析 Resolve

講解 webpack 是如何知道引入的模組位置，以及 resolve 屬性的意義及設定方式。

頁數	範例	描述
3-40	absolute	使用絕對路徑引入模組
3-41	relative	使用相對路徑引入模組
3-41	module	使用模組路徑引入模組
3-43	resolve-alias	使用 resolve.alias 設定路徑別名
3-44	resolve-alias-npm	將模組路徑設為路徑別名來引入第三方庫
3-45	resolve-modules	使用 resolve.module 設定找尋模組的目錄
3-47	resolve-main-fields	使用 resolve.mainFields 決定 npm 模組的引入檔案
3-48	mainfiles	使用 resolve.mainFiles 決定預設引入檔案
3-49	extensions	使用 resolve.extensions 設定預設副檔名

第五節：模組 Module 的規則判定

本節為 module 屬性的設定方式解說的第一部分，講解 module 屬性中的規則如何匹配。

頁數	範例	描述
3-51	css-module	演示 module 屬性的 test 與 use
3-52	rules-test-include	使用 module 屬性的 include 包含模組
3-53	rules-exclude	使用 module 屬性的 exclude 排除模組
3-54	rules-resource-query	使用 module 屬性的 resourceQuery 判斷 query 參數是否匹配
3-56	rules-test-include-exclude	使用多個判斷類屬性決定模組是否匹配
3-58	rules-issuer-and	使用 issuer 判斷請求資源是否匹配
3-59	rules-multiple	演示同個資源同時匹配多個條件
3-61	rules-oneof	使用 oneOf 屬性在同時匹配多個條件時只作用其中一個
（未收入）	loader-call	演示多條件匹配與 oneOf 同時作用的效果

第六節：模組 Module 的處理

本節為 module 屬性的設定方式解說的第二篇，講解 module 屬性如何設定處理程序。

頁數	範例	描述
3-67	use-string	使用字串設定 loader 的來源
3-68	use-obj	使用物件設定 loader 的來源與設定參數
3-69	use-func	使用函式設定 loader
3-70	use-array	使用陣列設定多個 loader
3-72	use-short	使用簡寫減少 use 一層的 loader 設定
3-74	loader-order	使用 enforce 改變預設 loader 的載入順序
3-77	no-parse	使用 noParse 屬性避免解析特定模組
3-78	parser	使用 parser 決定特定模組語意如何設定

第七節：插件 Plugins

本節說明如何配置 Plugins 。

頁數	範例	描述
3-81	plugin-copy	演示使用 CopyPlugin 複製檔案至目標目錄中
3-81	plugin-css	演示在 loader 中設定 MiniCssExtractPlugin 所提供的 loader
3-82	plugin-css-minimizer	演示在 optimization 中使用 CssMinimizerPlugin 作為 minimizer

第八節：監聽 Watch

講解 webpack 的監聽模式，以及 watch 屬性與 watchOptions 設定項與設定方式。

頁數	範例	描述
3-85	simple-watch	設定 watch 屬性，開啟監控功能
3-87	watch-options	演示各個監控功能屬性的效果
3-89	dev-server	演示使用 DevServer 預設開啟監控模式

第九節： Source Map

講解 Source Map 的功用及原理。

頁數	範例	描述
3-91	without-source-map	演示在開發時，沒有 source map 的困難
3-93	source-map	演示使用 source map 解決開發時程式碼對應至原始碼的問題
3-97	babel-source-map	以 Babel 說明 source map 的原理

第十節： Dev Tool

講解在 webpack 中使用 devTools 屬性設定 Source Map 的方式。

頁數	範例	描述
3-107	devtool	演示不同的 devtool 效果

第十一節：最佳化 Optimization 與模式 Mode

講述如何使用 webpack 的 optimization 配置各種輸出以配合設定最佳化，並以 Mode 輔助做特定的環境配置。

頁數	範例	描述
3-125	module-ids	演示使用 moduleIds 屬性修改 webpack 中生成 module id 的方式
3-127	chunk-ids	演示使用 chunkIds 屬性修改 webpack 中 chunk 的 id 生成方式
3-130	node-env	使用 node-env 修改環境變數
3-131	flag-included-chunks	使用 flagIncludeChunks 來決定是否要分出各個 chunk 資源
3-134	side-effects	對非全域的模組刪減未引入的變數
3-136	used-exports	避免未引入的模組引入
3-136	concatenate-modules	使用 concatenateModules 將模組合併
3-137	minimize	使用 minimize 將輸出 bundle 壓縮

第十二節：配置檔的種類

本節說明多種類型的配置檔使用方式。

頁數	範例	描述
3-140	cli-file	使用導出配置物件的檔案作為配置檔
3-141	export-function	使用導出函式的檔案作為配置檔
3-143	export-promise	使用 Promise 導出，非同步取得配置的內容
3-144	export-array	使用陣列導出多個配置，並同時執行多種建置
3-144	parallelism	藉由導出 parallelism 來控制同步建置的數量

第十三節：使用 Node.js API 操作 webpack

學習如何使用 Node.js API 來操作 webpack 。

頁數	範例	描述
3-146	node-interface	使用 Node.js API 叫用 webpack 執行建置
3-147	node-interface-callback	使用 Node.js API 中的 Callback 函式取得建置資訊並輸出
3-148	node-interface-run	叫用 run 執行建置
3-148	node-interface-watch	使用 watch 啟動監控模式並執行建置
3-151	node-interface-multiple	使用陣列格式的配置執行複數個建置
3-152	node-plugins	使用 apply 為 compiler 注入 plugin
3-154	node-interface-error-handling	演示 Node.js API 錯誤訊息的處理

第四章：真實世界的 webpack

以開發時會遇到的實際情形進行 webpack 的配置示範。

第一節：使用 JavaScript

說明如何配置 webpack 用來開發 JavaScript 應用程式。

頁數	範例	描述
4-3	babel-plugin	使用 CLI 載入 Babel plugin 來轉換程式碼
4-4	babel-config	使用配置檔載入 Babel plugin 來轉換程式碼
4-5	babel-preset	使用 Babel preset 替換複數個 plugin
4-6	babel-browserslist	使用 Babel 與 Browserslist 配置目標環境
4-6	babel-polyfill	使用 Babel polyfill 對新的語意做轉換
4-8	babel-webpack	使用 webpack 配置 Babel 做建置

第二節：使用 Style

講述如何在 webpack 中處理 Style 樣式表。

頁數	範例	描述
4-11	postcss-cli-example	使用 PostCSS 的 CLI 配置轉換 CSS 程式碼
4-13	postcss-plugin	添加 PostCSS plugin 執行特定的轉換
4-13	postcss-config	使用配置檔配置 PostCSS 的轉換方式
4-14	postcss-browserslist	使用 PostCSS 與 Browserslist 配置目標環境
4-14	postcss-webpack-loader	在 webpack 中使用 postcss-loader 處理 CSS
4-15	postcss-css-loader	在 webpack 中配置 css-loader 讀取 CSS
4-16	postcss-style-loader	在 webpack 中配置 style-loader 載入 CSS 至頁面
4-17	extract-css	使用 mini-css-extract-plugin 拆分 CSS 為獨立檔案

第三節：載入圖片資源

介紹如何使用 webpack 載入圖片資源，並對載入做最佳化處理。

頁數	範例	描述
4-21	load-image-by-path	將圖片以原本靜態檔案的方式載入
4-23	load-image-by-url	將圖片轉為 Data URL 載入
4-24	load-image-by-auto	將圖片依照大小切換靜態檔案與 Data URL 的方式載入
4-24	load-image-by-auto-max-size	修改切換載入方式的圖片大小
4-25	load-svg	將 SVG 圖片以 HTML tag 的格式籤入頁面

第四節：配置多模式專案

講解如何在同一專案中配置多種模式的 webpack 設定。

頁數	範例	描述
4-27	function	使用函式設定配置檔
4-29	merge	使用 webpack-merge 設定配置檔
4-30	chain	使用 webpack-chain 設定配置檔

第五節： Module Federation

本節介紹 Module Federation 用途與使用方式。

頁數	範例	描述
4-34	host-and-remote	演示 Module Federation

第五章：使用 webpack 優化環境體驗

開發環境減少重新載入時的麻煩，生產環境降低請求的時間消耗。

第一節：建立 webpack 開發環境

使用 webpack 建立大型專案的開發環境。

頁數	範例	描述
5-2	development-mode	使用 development 作為開發時的模式
5-3	source-map	使用 source map 解決開發時程式碼對應問題
5-4	dev-server	使用 DevServer 作為開發伺服器
5-5	auto-create-html	使用 html-webpack-plugin 產生 index.html
5-6	reload-config	修改配置後自動重新建置
5-7	hmr	手動設定 Hot Module Replacement

第二節：建立 webpack 生產環境 - 減小體積

講述使用 webpack 建立生產環境中代碼減少體積的優化方式。

頁數	範例	描述
5-10	production-mode	使用 production 作為生產環境的建置模式
5-11	optimization-minimize	使用 optimization 啟用最小化 bundle 體積的功能
5-12	optimization-node-env	使用環境變數決定執行的程式碼
5-14	css-minimize	壓縮 CSS 的體積
5-15	extract-css-minimize	壓縮獨立抽出的 CSS 體積
5-16	minify-image	壓縮圖片的體積
5-17	minify-svg	壓縮 SVG 的體積

第三節：建立 webpack 生產環境 - 切割代碼

講述如何在生產環境中適當的切割代碼，讓應用程式提升效能。

頁數	範例	描述
5-20	entry	使用 entry 的物件設定，切割為複數個 bundle
5-21	import	使用 import() 動態引入模組，藉以切割 bundle
5-24	split-chunks	使用 optimization 的 splitChunks 屬性手動切割 bundle

第四節：建立 webpack 生產環境 - 快取

講述如何使用瀏覽器盡可能的保持快取，不用重新請求資源。

頁數	範例	描述
5-28	caching	演示瀏覽器快取的功能
5-29	update-caching	使用 [fullhash] template string 定義 bundle 檔名，在更新程式碼後可以產生不同檔名，促使瀏覽器重新抓取資源
5-31	dependency	演示修改單一模組程式碼後，連其他的模組也因為 [fullhash] 的修改成需要重新載入
5-32	extract-dependency	獨立各個 Chunk ，使未修改的模組可以繼續使用快取
5-34	extract-runtime	獨立輸出 runtime 的 bundle ，藉此延長快取的時間
5-35	inline-runtime	runtime 程式碼較少，可以直接嵌入 index.html 中
5-37	stable-module-id	設定固定的 module id 避免其破壞快取

第五節：建立 webpack 生產環境 - 追蹤建置

講述如何使用分析工具解析 bundle 內模組的組合。

頁數	範例	描述
5-39	performance	使用 performance 屬性設定輸出 bundle 狀態
5-41	cli-args	使用 CLI 參數 progress 輸出建置細節
5-42	cli-args-json	使用 CLI 參數 json 導出建置細節
5-43	dashboard-demo	使用 webpack-dashboard 監控 bundle 狀態
5-44	bundlesize-demo	使用 bundlesize 警示 bundle 體積過大

第六章：解構 webpack

學習 webpack 內部的運作機制。

第一節： Bundle 導讀

本節解析 Bundle 的程式碼。

頁數	範例	描述
6-2	simple	Bundle 架構說明

第二節：自己動手寫 webpack

本節目標在於實作一個簡易的打包工具。

頁數	範例	描述
6-16	read-file	讀入入口模組
6-17	ast-parser	將程式碼內容轉為 AST
6-19	tree-walker	巡覽找出引入語法
6-20	create-asset	建立所有資源的資訊物件
6-22	create-graph	依照資源的資訊建立相依圖
6-23	mapping	為每個資源填入 ID 來做對應
6-27	bundle	實作打包機制
6-27	write-file	輸出 bundle 檔案

第三節： Loader 的內部構造

本節介紹 Loader 內部的運作方式。

頁數	範例	描述
6-31	single	基本的 loader
6-33	multiple	演示連接多個 loader 時的結構與用法
6-34	async	非同步的 loader 的結構與用法
6-35	get-options	loader 內使用 getOptions 取得設定
6-36	context	loader 內使用 context 取得模組所在的目錄
6-36	add-dependency	loader 內使用 addDependency 設定額外的依賴
6-37	pitching	演示 loader 的 pitching 階段
6-39	pitching-args	演示 loader 的 pitching 參數功能
6-39	pitching-data	演示 loader 的 pitching 中使用 data 傳遞資料
6-40	pitching-return	在 loader 的 pitching 階段使用回傳停止 loader 的執行
6-41	emit-error	在 loader 內使用 emitError 輸出錯誤
6-42	throw-error	在 loader 內使用 throw 拋出錯誤並停止執行
6-42	callback-error	在 loader 內使用 callback 拋出錯誤並停止執行

第四節： Plugin 的內部構造

本節說明 Plugin 的內容運作方式。

頁數	範例	描述
6-44	hello-world	基本的 plugin
6-45	hooks	演示在 plugin 中註冊各個 hooks 的執行程式
6-47	done	使用 hook done 演示不同的註冊方式

第七章：寫在 webpack 之後

新興的建置工具出現。

第一節：使用 Snowpack 以原生模組系統建置專案

講述如何使用 Snowpack 以原生模組系統建置專案。

頁數	範例	描述
7-4	webpack-demo	使用 webpack 打包
7-5	snowpack-demo	演示使用 snowpack 打包
7-7	snowpack-css	使用 snowpack 載入 CSS 樣式表
7-8	snowpack-babel	在 snowpack 內使用 babel 轉換 JavaScript 代碼
（未收入）	webpack-babel	在 webpack 內使用 babel 轉換 JavaScript 代碼
（未收入）	vite-demo	演示使用 vite 載入專案