这是一本针对零基础前端开发者讲解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
书单推荐
