此庫為「從 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 | 使用 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 的名稱 |
講解 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 屬性的 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
屬性如何設定處理程序。
頁數 | 範例 | 描述 |
---|---|---|
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 | 使用 apply 為 compiler 注入 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 | 使用 optimization 的 splitChunks 屬性手動切割 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 載入專案 |