Webpack+Babel入門與實(shí)例詳解

第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的區(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的其他知識 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 插件簡介 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 復(fù)制文件插件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的自定義參數(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簡介 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簡介 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中對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簡介 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簡介 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 編寫簡單的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