Webpack 教程

这是针对新人的零基础Webpack教程。

若你是第一次接触Webpack，也许会像三年前的我一样，迷惑与不解。

我是2016年的年底第一次接触Webpack，当时公司项目用的构建工具还不是Webpack，而技术社区已经渐渐流行用Webpack构建前端工程了。当时还没有完整的Webpack相关的教程，当时的官方文档也并不容易理解。于是自己找了一些文章，尝试学习了一下。不过，那会儿没有学明白。因为Webpack是基于Node.js的，自己当时也不会Node.js，于是又开始学习Node.js……

当时我对整个Webpack是困惑的，之后又做了很长时间 开发后，才渐渐对Webpack有了一些认知。但是我还是不会使用Webpack进行项目开发，从 Webpack1.0到Webpack4.0，版本一更新，学过的知识就面临淘汰。因为版本更新，技术社区的文章内容有些也是被淘汰的，但你自己通常是不知道的。

Webpack杂乱的的体系，学习成本较高的官方文档，给了我们这些初学者很大的学习难度（其实和我写Babel教程的原因类似）。

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

现在是做前端开发的第五年了，我发现Webpack官方文档的学习成本还是比较高的。于是便写了这份教程，希望能对 JavaScript 开发者有所帮助。

本教程主要使用的Webpack版本是v4.46.0，对整个4.x版本都适用。同时，会对一些4.0.0版本之前流行的loader与plugin做简单介绍，以方便阅读社区的文章。对于v5.0版本的Webpack会再单独写一份教程。当然，在学习本教程的时候，推荐大家使用教程里的版本。

-----------------------------------------------------------------

2022年1月注：

《Webpack+Babel入门与实例详解》将由电子工业出版社出版，这是一本针对零基础前端开发者讲解Webpack与Babel使用方法的图书。

本书由两大部分构成，第一部分介绍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之后的版本都适用。

本书的内容是对网站教程内容做了一次升级，也增加了原理方面的讲解，对原理方面感兴趣的读者可以购买该书。

另外，已与出版社沟通，本网站已发表的内容不会删除，大家还可以继续阅读已有的教程。

-------------------------------------------------------------------

2021年5月注：本教程最初是为Webpack4版本写的，因为Webpack5正式版已发布一段时间了，现决定这份Webpack4的教程内容暂时不再更新，之后将会写关于Webpack5的内容，这将是一份完整的资料。

另外推荐阮一峰的ES6教程，Webpack3的实体书可以看一下吴浩麟的书，Webpack4的书可以看一下居玉皓的书。