Skip to content

peterhpchen/book-webpack-examples

Repository files navigation

書籍「從 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 」。

範例目錄

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

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

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

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

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 的各項主要功能。

頁數 範例 描述
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 。

頁數 範例 描述
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

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

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

講解 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

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

介紹 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 的主要手段。

頁數 範例 描述
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

講解 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 設定基底路徑

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

頁數 範例 描述
3-23 output-default 預設的 output 配置
3-24 output-path 使用 outputpath 屬性設置輸出目錄
3-25 output-path-hash [fullhash] 設定輸出目錄
3-26 output-filename 使用 outputfilename 設定輸出的 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 的名稱

講解 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 屬性中的規則如何匹配。

頁數 範例 描述
3-51 css-module 演示 module 屬性的 testuse
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 屬性如何設定處理程序。

頁數 範例 描述
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 。

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

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

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

講解 Source Map 的功用及原理。

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

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

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

講述如何使用 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 。

頁數 範例 描述
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 使用 applycompiler 注入 plugin
3-154 node-interface-error-handling 演示 Node.js API 錯誤訊息的處理

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

說明如何配置 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 做建置

講述如何在 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 用途與使用方式。

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

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

使用 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 建立生產環境中代碼減少體積的優化方式。

頁數 範例 描述
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 的體積

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

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

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

頁數 範例 描述
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 避免其破壞快取

講述如何使用分析工具解析 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 內部的運作機制。

本節解析 Bundle 的程式碼。

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

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

頁數 範例 描述
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 內部的運作方式。

頁數 範例 描述
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 的內容運作方式。

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

新興的建置工具出現。

講述如何使用 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 載入專案