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的使用上有豐富經驗。
