适读人群 ：前端开发工程师和对Webpack、Babel技术感兴趣的读者。

Webpack是前端开发的主流构建工具，Babel是转译ES6代码的通用解决方案。

1.业内专家新加坡StarVision区域项目经理Peter Xu和学而思网校原1对1前端负责人汪心旺联袂力荐。

2.本书适用于Webpack v5.0.0和Babel v7.0.0之后的版本，是针对零基础前端开发者讲解Webpack与Babel使用方法的图书。

3.本书对构建灵活的前端工程化架构，提升定制化的能力很有帮助。

这是一本针对零基础前端开发者讲解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的使用上有丰富经验。

对于Webpack和Babel的讲解，本书体现了通俗易懂、实践性强的特点。无论是初学者，还是高阶开发者，相信都能通过阅读本书有所收获。作为一名IT行业的项目经理，我从本书中了解了前端构建的相关概念，这对项目中的沟通很有帮助。

——新加坡StarVision区域项目经理 Peter Xu

瑞涛老师是一个聊技术眼睛就会放光的人。本书能帮助你系统化地学习Webpack和Babel的相关知识。在不同的公司业务、产品和团队发展状况下，本书对构建灵活的前端工程化架构、提升定制化的能力很有帮助。

——学而思网校原1对1前端负责人 汪心旺

第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