Webpack+Babel入門與實例詳解

這是一本針對零基礎前端開發者講解Webpack與Babel使用方法的圖書。隨著前端工程的不斷發展，Webpack與Babel已成為前端開發的兩大核心工具。目前，Webpack是前端開發的主流構建工具，Babel是轉譯ES6代碼的通用解決方案。
 
本書由兩大部分構成，第一部分介紹Webpack，第二部分介紹Babel。Webpack部分講解了Webpack的安裝、資源入口與出口、前置處理器與外掛程式的配置、開發環境與生產環境的配置、性能優化及構建原理等。Babel部分講解了Babel入門知識、Babel的設定檔、預設與外掛程式的選擇、babel-polyfill的使用方法，以及@babel/preset-env和@babel/plugin-transform-runtime這兩個核心配置項的使用方法，這一部分還會講解Babel的原理及Babel外掛程式的開發。最後，在附錄中介紹了Module Federation與微前端，以及Babel 8前瞻等內容。
 
本書主要使用的Webpack版本是v5.21.2，但對v5.0.0之後的版本都適用；主要使用的Babel版本是v7.13.10，但對v7.0.0之後的版本都適用。

第1章 Webpack入門 1
1．1 Webpack簡介 1
1．2 安裝Webpack 5 3
1．2．1 安裝Node．js 3
1．2．2 安裝Webpack 4
1．2．3 全域安裝與本地安裝Webpack的區別 5
1．3 Webpack快速入門 6
1．3．1 Webpack的命令列打包 6
1．3．2 Webpack打包模式mode 9
1．3．3 Webpack的設定檔 9
1．4 Webpack前置處理器 12
1．4．1 引入CSS文件 12
1．4．2 Webpack前置處理器的使用 14
1．5 本章小結 16

第2章 Webpack資源入口與出口 18
2．1 模組化 19
2．1．1 JS模組化歷史 20
2．1．2 ES6 Module 20
2．1．3 CommonJS 22
2．2 Webpack資源入口 23
2．2．1 Webpack基礎目錄context 24
2．2．2 Webpack資源入口entry 25
2．3 Webpack資源出口 27
2．3．1 Webpack的output．filename 28
2．3．2 Webpack的output．path 31
2．3．3 Webpack的output．publicPath 32
2．3．4 output．publicPath與資源訪問路徑 37
2．3．5 Webpack的output．chunkFilename 41
2．4 hash、fullhash、chunkhash和contenthash的區別 42
2．4．1 流覽器緩存 42
2．4．2 Webpack與hash演算法 44
2．4．3 Webpack中hash、fullhash、chunkhash和contenthash的區別 44
2．5 本章小結 47

第3章 Webpack前置處理器 48
3．1 前置處理器的配置與使用 49
3．1．1 前置處理器的關鍵配置項 49
3．1．2 exclude和include 50
3．1．3 其他前置處理器寫法 51
3．2 Babel前置處理器babel-loader 52
3．2．1 引入問題 53
3．2．2 直接使用Webpack 53
3．2．3 使用babel-loader 54
3．3 文件資源前置處理器file-loader 57
3．3．1 file-loader處理JS引入的圖片 57
3．3．2 file-loader處理CSS引入的圖片 60
3．3．3 file-loader的其他知識 62
3．4 增強版文件資源前置處理器url-loader 62
3．4．1 url-loader的Base64編碼 62
3．4．2 file-loader與url-loader處理後的資源名稱 66
3．4．3 file-loader與url-loader處理後的資源路徑 66
3．5 本章小結 68

第4章 Webpack外掛程式 69
4．1 外掛程式簡介 69
4．2 清除檔外掛程式clean-webpack-plugin 71
4．2．1 clean-webpack-plugin簡介 71
4．2．2 安裝clean-webpack-plugin 71
4．2．3 使用clean-webpack-plugin 71
4．3 複製檔外掛程式copy-webpack-plugin 72
4．3．1 copy-webpack-plugin簡介 72
4．3．2 安裝copy-webpack-plugin 73
4．3．3 使用copy-webpack-plugin 73
4．4 HTML範本外掛程式html-webpack-plugin 74
4．4．1 html-webpack-plugin簡介 74
4．4．2 安裝html-webpack-plugin 74
4．4．3 使用html-webpack-plugin 75
4．4．4 html-webpack-plugin的自訂參數 76
4．5 本章小結 80

第5章 Webpack開發環境配置 81
5．1 文件監聽與webpack-dev-server 81
5．1．1 檔監聽模式 81
5．1．2 webpack-dev-server的安裝與啟動 84
5．1．3 webpack-dev-server的常用參數 86
5．2 模組熱替換 88
5．3 Webpack中的source map 93
5．3．1 source map簡介 93
5．3．2 source map的配置項devtool 96
5．3．3 開發環境與生產環境source map配置 99
5．4 Asset Modules 100
5．4．1 Asset Modules簡介 100
5．4．2 自訂檔案名稱 103
5．4．3 資源類型為asset/inline 106
5．4．4 資源類型為asset 107
5．5 本章小結 109

第6章 Webpack生產環境配置 110
6．1 環境變數 111
6．1．1 Node．js環境裡的環境變數 111
6．1．2 Webpack打包模組裡的環境變數 114
6．2 樣式處理 115
6．2．1 樣式檔的提取 116
6．2．2 Sass處理 119
6．2．3 PostCSS 121
6．3 合併配置webpack-merge 123
6．4 性能提示 129
6．5 本章小結 132

第7章 Webpack性能優化 133
7．1 打包體積分析工具webpack-bundle-analyzer 134
7．1．1 安裝 134
7．1．2 使用 134
7．2 打包速度分析工具speed-measure-webpack-plugin 137
7．2．1 安裝與配置 137
7．2．2 前置處理器與外掛程式的時間分析 139
7．3 資源壓縮 141
7．3．1 壓縮JS檔 141
7．3．2 壓縮CSS檔 143
7．4 縮小查找範圍 147
7．4．1 配置前置處理器的exclude與include 147
7．4．2 module．noParse 148
7．4．3 resolve．modules 148
7．4．4 resolve．extensions 149
7．5 代碼分割optimization．splitChunks 150
7．5．1 代碼分割 150
7．5．2 splitChunks 152
7．5．3 splitChunks示例講解 156
7．6 搖樹優化Tree Shaking 161
7．6．1 使用Tree Shaking的原因 161
7．6．2 使用Tree Shaking 162
7．6．3 生產環境的優化配置 164
7．6．4 Webpack 5中對Tree Shaking的改進 165
7．7 使用緩存 167
7．7．1 Webpack中的緩存 167
7．7．2 檔案系統緩存的使用 168
7．8 本章小結 169

第8章 Webpack原理與拓展 170
8．1 Webpack構建原理 170
8．1．1 Webpack打包檔分析 171
8．1．2 tapable 178
8．1．3 Webpack打包流程與源碼初探 181
8．2 Webpack前置處理器開發 185
8．2．1 基礎前置處理器開發 186
8．2．2 鏈式前置處理器開發 188
8．2．3 自訂前置處理器傳參 190
8．3 Webpack外掛程式開發 191
8．3．1 Webpack外掛程式開發概述 191
8．3．2 Webpack外掛程式開發實例 192
8．3．3 自訂外掛程式傳參 195
8．4 本章小結 197

第9章 Babel入門 198
9．1 Babel簡介 198
9．2 Babel快速入門 199
9．2．1 Babel的安裝、配置與轉碼 199
9．2．2 Babel轉碼說明 201
9．3 引入polyfill 202
9．4 本章小結 205

第10章 深入Babel 207
10．1 Babel版本 207
10．2 Babel設定檔 208
10．2．1 設定檔 208
10．2．2 外掛程式與預設 210
10．2．3 外掛程式與預設的短名稱 212
10．2．4 Babel外掛程式和預設的參數 213
10．3 預設與外掛程式的選擇 213
10．3．1 預設的選擇 214
10．3．2 外掛程式的選擇 215
10．4 babel-polyfill 216
10．5 @babel/preset-env 224
10．5．1 @babel/preset-env簡介 224
10．5．2 @babel/preset-env等價設置 225
10．5．3 @babel/preset-env與browserslist 226
10．5．4 @babel/preset-env的參數 228
10．6 @babel/plugin-transform-runtime 235
10．6．1 @babel/runtime與輔助函數 235
10．6．2 @babel/plugin-transform-runtime與輔助函數的自動引入 239
10．6．3 @babel/plugin-transform-runtime與API轉換 241
10．6．4 @babel/plugin-transform-runtime配置項 245
10．7 本章小結 248

第11章 Babel工具 249
11．1 @babel/core 249
11．2 @babel/cli 252
11．2．1 @babel/cli的安裝與轉碼 252
11．2．2 @babel/cli的常用命令 253
11．3 @babel/node 253
11．4 本章小結 255

第12章 Babel原理與Babel外掛程式開發 256
12．1 Babel原理 256
12．1．1 Babel轉碼過程 256
12．1．2 Babel轉碼分析 257
12．2 Babel外掛程式開發 259
12．2．1 編寫簡單的Babel外掛程式 259
12．2．2 Babel外掛程式編寫指南 261
12．2．3 手寫let轉var外掛程式 264
12．2．4 Babel外掛程式傳參 265
12．3 本章小結 266
附錄A Module Federation與微前端 267
附錄B Babel 8前瞻 271

薑瑞濤
 
畢業於華北電力大學，五年前端開發經驗。曾在好未來、用友擔任高級前端開發工程師，參與過用友NC Cloud大型企業數位化平臺和學而思網校1對1管理後臺的開發。擅長工程化解決前端相容性問題，在Babel的使用上有豐富經驗。