前言

Webpack和Babel是前端工程领域最核心的两大工具。我回想起，自己最初从事前端开发工作的时候，面对着技术社区杂乱的Webpack和Babel资料，在很长一段时间内都感到迷惑与不解。

做前端开发工作的第一年，我被Babel的那堆babel-preset-es2015、babel-preset-es2016、babel-preset-stage-0、babel-preset-stage-1、@babel/preset-env和@babel/plugin-transform-runtime配置项搞得晕头转向，经常问自己到底该用哪些配置项，到底该怎么配置。

我处于这种混乱的状态整整一年之后，才渐渐对Babel有所认知，但是这种认知也很不全面。我从Babel 6到Babel 7学到的大量知识都是错误的和即将被淘汰的。这些零散的、错误的知识碎片增加了初学者的学习难度。

对于Webpack，我差不多也曾处于一样的状态。在2016年年底，我第一次接触到Webpack，当时公司项目用的构建工具还不是Webpack，而技术社区内已经渐渐开始流行使用Webpack构建前端工程了。当时没有完整的Webpack资料，官方文档也不容易理解。于是我找了一些文章，尝试学习，不过没有学明白。这是因为Webpack是基于Node.js的，而我当时不会Node.js，于是我又开始学习Node.js。

几年时间过去了，我对Webpack越来越熟悉。这中间走了很多弯路，例如，为了掌握Webpack的常规配置而深入学习Node.js，其实只需要会用几个Node.js的模块函数就可以了，等等。

我觉得前端工程领域需要一本对新人友好的Webpack与Babel图书，于是我将自己的技术博客文章整理成了本书。我在本书中对博客文章中的Webpack部分进行版本升级，本书使用的是Webpack 5版本，针对Babel部分还增加了原理和插件开发的内容。本书是一本全方位地给初学者讲解Webpack和Babel的图书，希望可以帮助读者成为更优秀的JavaScript开发者。

本书主要由Webpack和Babel两大部分构成，Webpack部分是第1章到第8章，Babel部分是第9章到第12章。这两部分内容相对独立，读者可以选择自己感兴趣的部分阅读。

本书中主要使用的Webpack版本是v5.21.2，但对v5.0.0之后的版本都适用；主要使用的Babel版本是v7.13.10，但对v7.0.0之后的版本都适用，而且还对Babel版本的变化给出了详细的说明。建议读者安装与书中版本一致的工具软件，这样可以减少npm包版本带来的差异。

本书使用的某些npm包在未来可能因依赖升级而发生错误，这时可以通过将x.y.z版本号中的y升级到最新版本来尝试修正该错误。另外，因为Webpack生成hash值的算法比较特殊，所以读者在自己电脑上执行代码时生成的带hash值的文件名可能与书中不一样。读者在查看某些运行结果时，需要手动更改打包编译后的文件名。

在阅读本书时，如果遇到有问题或错误的地方，可以在本书的GitHub代码仓库（见链接15）[1]上通过Issue反馈给我。

感谢关注我技术博客（见链接16）的读者们，你们的支持和赞誉给了我写作本书的动力。

感谢张东东和孟津，你们在我还是一个新人时就给予了我很多帮助，一直激励着我深入前端开发的学习。

最后，感谢付睿编辑，你在我写作本书的过程中给予了我不少帮助，没有你的耐心指导就没有本书的出版。

姜瑞涛

---

[1] 请访问http://www.broadview.com.cn/42472下载本书提供的附加参考资料。正文中提及链接1、链接2等时，可在下载的“参考资料.pdf”文件中进行查询。