《Webpack+Babel入門與實例詳解》是2021年電子工業出版社出版的圖書，作者是姜瑞濤。
基本介紹
- 書名：Webpack+Babel入門與實例詳解
- 作者：姜瑞濤
- 出版社：電子工業出版社
- 出版時間：2021年12月
- 頁數：284 頁
- 定價：16 元
- 開本：89 開
- ISBN：9787121424724
內容簡介,作者簡介,圖書目錄,
內容簡介
這是一本針對零基礎前端開發者講解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之後的版本都適用。
作者簡介
姜瑞濤
畢業於華北電力大學，五年前端開發經驗。曾在好未來、用友擔任高級前端開發工程師，參與過用友NC Cloud大型企業數位化平台和學而思網校1對1管理後台的開發。擅長工程化解決前端兼容性問題，在Babel的使用上有豐富經驗。
圖書目錄
第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
