Webpack+Babel入門與實(shí)例詳解
定 價(jià)：89 元
叢書名：前端工程化系列
- 作者：姜瑞濤
- 出版時(shí)間：2021/12/1
- ISBN：9787121424724
- 出 版 社：電子工業(yè)出版社
- 中圖法分類：TP392.092.2
- 頁(yè)碼：284
- 紙張：
- 版次：01
- 開本：16開
這是一本針對(duì)零基礎(chǔ)前端開發(fā)者講解Webpack與Babel使用方法的圖書。隨著前端工程的不斷發(fā)展，Webpack與Babel已成為前端開發(fā)的兩大核心工具。目前，Webpack是前端開發(fā)的主流構(gòu)建工具，Babel是轉(zhuǎn)譯ES6代碼的通用解決方案。本書由兩大部分構(gòu)成，第一部分介紹Webpack，第二部分介紹Babel。Webpack部分講解了Webpack的安裝、資源入口與出口、預(yù)處理器與插件的配置、開發(fā)環(huán)境與生產(chǎn)環(huán)境的配置、性能優(yōu)化及構(gòu)建原理等。Babel部分講解了Babel入門知識(shí)、Babel的配置文件、預(yù)設(shè)與插件的選擇、babel-polyfill的使用方法，以及@babel/preset-env和@babel/plugin-transform-runtime這兩個(gè)核心配置項(xiàng)的使用方法，這一部分還會(huì)講解Babel的原理及Babel插件的開發(fā)。最后，在附錄中介紹了Module Federation與微前端，以及Babel 8前瞻等內(nèi)容。本書主要使用的Webpack版本是v5.21.2，但對(duì)v5.0.0之后的版本都適用；主要使用的Babel版本是v7.13.10，但對(duì)v7.0.0之后的版本都適用。
姜瑞濤畢業(yè)于華北電力大學(xué)，五年前端開發(fā)經(jīng)驗(yàn)。曾在好未來、用友擔(dān)任高級(jí)前端開發(fā)工程師，參與過用友NC Cloud大型企業(yè)數(shù)字化平臺(tái)和學(xué)而思網(wǎng)校1對(duì)1管理后臺(tái)的開發(fā)。擅長(zhǎng)工程化解決前端兼容性問題，在Babel的使用上有豐富經(jīng)驗(yàn)。
第1章 Webpack入門 1
1.1 Webpack簡(jiǎn)介 1
1.2 安裝Webpack 5 3
1.2.1 安裝Node.js 3
1.2.2 安裝Webpack 4
1.2.3 全局安裝與本地安裝Webpack的區(qū)別 5
1.3 Webpack快速入門 6
1.3.1 Webpack的命令行打包 6
1.3.2 Webpack打包模式mode 9
1.3.3 Webpack的配置文件 9
1.4 Webpack預(yù)處理器 12
1.4.1 引入CSS文件 12
1.4.2 Webpack預(yù)處理器的使用 14
1.5 本章小結(jié) 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基礎(chǔ)目錄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的區(qū)別 42
2.4.1 瀏覽器緩存 42
2.4.2 Webpack與hash算法 44
2.4.3 Webpack中hash、fullhash、chunkhash和contenthash的區(qū)別 44
2.5 本章小結(jié) 47
第3章 Webpack預(yù)處理器 48
3.1 預(yù)處理器的配置與使用 49
3.1.1 預(yù)處理器的關(guān)鍵配置項(xiàng) 49
3.1.2 exclude和include 50
3.1.3 其他預(yù)處理器寫法 51
3.2 Babel預(yù)處理器babel-loader 52
3.2.1 引入問題 53
3.2.2 直接使用Webpack 53
3.2.3 使用babel-loader 54
3.3 文件資源預(yù)處理器file-loader 57
3.3.1 file-loader處理JS引入的圖片 57
3.3.2 file-loader處理CSS引入的圖片 60
3.3.3 file-loader的其他知識(shí) 62
3.4 增強(qiáng)版文件資源預(yù)處理器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 本章小結(jié) 68
第4章 Webpack插件 69
4.1 插件簡(jiǎn)介 69
4.2 清除文件插件clean-webpack-plugin 71
4.2.1 clean-webpack-plugin簡(jiǎn)介 71
4.2.2 安裝clean-webpack-plugin 71
4.2.3 使用clean-webpack-plugin 71
4.3 復(fù)制文件插件copy-webpack-plugin 72
4.3.1 copy-webpack-plugin簡(jiǎn)介 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簡(jiǎn)介 74
4.4.2 安裝html-webpack-plugin 74
4.4.3 使用html-webpack-plugin 75
4.4.4 html-webpack-plugin的自定義參數(shù) 76
4.5 本章小結(jié) 80
第5章 Webpack開發(fā)環(huán)境配置 81
5.1 文件監(jiān)聽與webpack-dev-server 81
5.1.1 文件監(jiān)聽模式 81
5.1.2 webpack-dev-server的安裝與啟動(dòng) 84
5.1.3 webpack-dev-server的常用參數(shù) 86
5.2 模塊熱替換 88
5.3 Webpack中的source map 93
5.3.1 source map簡(jiǎn)介 93
5.3.2 source map的配置項(xiàng)devtool 96
5.3.3 開發(fā)環(huán)境與生產(chǎn)環(huán)境source map配置 99
5.4 Asset Modules 100
5.4.1 Asset Modules簡(jiǎn)介 100
5.4.2 自定義文件名稱 103
5.4.3 資源類型為asset/inline 106
5.4.4 資源類型為asset 107
5.5 本章小結(jié) 109
第6章 Webpack生產(chǎn)環(huán)境配置 110
6.1 環(huán)境變量 111
6.1.1 Node.js環(huán)境里的環(huán)境變量 111
6.1.2 Webpack打包模塊里的環(huán)境變量 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 本章小結(jié) 132
第7章 Webpack性能優(yōu)化 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 預(yù)處理器與插件的時(shí)間分析 139
7.3 資源壓縮 141
7.3.1 壓縮JS文件 141
7.3.2 壓縮CSS文件 143
7.4 縮小查找范圍 147
7.4.1 配置預(yù)處理器的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 搖樹優(yōu)化Tree Shaking 161
7.6.1 使用Tree Shaking的原因 161
7.6.2 使用Tree Shaking 162
7.6.3 生產(chǎn)環(huán)境的優(yōu)化配置 164
7.6.4 Webpack 5中對(duì)Tree Shaking的改進(jìn) 165
7.7 使用緩存 167
7.7.1 Webpack中的緩存 167
7.7.2 文件系統(tǒng)緩存的使用 168
7.8 本章小結(jié) 169
第8章 Webpack原理與拓展 170
8.1 Webpack構(gòu)建原理 170
8.1.1 Webpack打包文件分析 171
8.1.2 tapable 178
8.1.3 Webpack打包流程與源碼初探 181
8.2 Webpack預(yù)處理器開發(fā) 185
8.2.1 基礎(chǔ)預(yù)處理器開發(fā) 186
8.2.2 鏈?zhǔn)筋A(yù)處理器開發(fā) 188
8.2.3 自定義預(yù)處理器傳參 190
8.3 Webpack插件開發(fā) 191
8.3.1 Webpack插件開發(fā)概述 191
8.3.2 Webpack插件開發(fā)實(shí)例 192
8.3.3 自定義插件傳參 195
8.4 本章小結(jié) 197
第9章 Babel入門 198
9.1 Babel簡(jiǎn)介 198
9.2 Babel快速入門 199
9.2.1 Babel的安裝、配置與轉(zhuǎn)碼 199
9.2.2 Babel轉(zhuǎn)碼說明 201
9.3 引入polyfill 202
9.4 本章小結(jié) 205
第10章 深入Babel 207
10.1 Babel版本 207
10.2 Babel配置文件 208
10.2.1 配置文件 208
10.2.2 插件與預(yù)設(shè) 210
10.2.3 插件與預(yù)設(shè)的短名稱 212
10.2.4 Babel插件和預(yù)設(shè)的參數(shù) 213
10.3 預(yù)設(shè)與插件的選擇 213
10.3.1 預(yù)設(shè)的選擇 214
10.3.2 插件的選擇 215
10.4 babel-polyfill 216
10.5 @babel/preset-env 224
10.5.1 @babel/preset-env簡(jiǎn)介 224
10.5.2 @babel/preset-env等價(jià)設(shè)置 225
10.5.3 @babel/preset-env與browserslist 226
10.5.4 @babel/preset-env的參數(shù) 228
10.6 @babel/plugin-transform-runtime 235
10.6.1 @babel/runtime與輔助函數(shù) 235
10.6.2 @babel/plugin-transform-runtime與輔助函數(shù)的自動(dòng)引入 239
10.6.3 @babel/plugin-transform-runtime與API轉(zhuǎn)換 241
10.6.4 @babel/plugin-transform-runtime配置項(xiàng) 245
10.7 本章小結(jié) 248
第11章 Babel工具 249
11.1 @babel/core 249
11.2 @babel/cli 252
11.2.1 @babel/cli的安裝與轉(zhuǎn)碼 252
11.2.2 @babel/cli的常用命令 253
11.3 @babel/node 253
11.4 本章小結(jié) 255
第12章 Babel原理與Babel插件開發(fā) 256
12.1 Babel原理 256
12.1.1 Babel轉(zhuǎn)碼過程 256
12.1.2 Babel轉(zhuǎn)碼分析 257
12.2 Babel插件開發(fā) 259
12.2.1 編寫簡(jiǎn)單的Babel插件 259
12.2.2 Babel插件編寫指南 261
12.2.3 手寫let轉(zhuǎn)var插件 264
12.2.4 Babel插件傳參 265
12.3 本章小結(jié) 266
附錄A Module Federation與微前端 267
附錄B Babel 8前瞻 271
書單推薦
