这些资料助你搞透 Webpack

学习 webpack 的时候，我主要参考了以下资料，分享给大家：

在掘金上搜索 webpack 相关的文章有 4533 篇，这么多的文章根本看不过来，这些文章适合对某个特定的概念理解不透彻时可以看看。 

「系统」学习 webpack 免费的资源也有很大多，不花一分钱也能够搞懂 webpack，我推荐下面这些：

1、官方文档与作者博客

官方文档是学习任何技术首要参考的资料，「能不看中文翻译就不看中文翻译」，比如 webpack 中文网，很多知识被翻译错了，或者会少内容。

https://webpack.js.org/concepts/

除此之外可以看看 webpack 作者的博客，这个非常权威，作者还有相关的视频演讲。下面是我在 medium 上的截图，medium 是一个非常不错的学习技术的平台，在这上面基本都能找到作者的博客（需要备梯子）。

尤其是下面这三篇文章（The Contributors Guide to webpack - Part1\2\3）https://link.medium.com/uwcGTR9038，告诉你如何给 webpack 贡献代码，文中写了关于 webpack 的代码设计原理。

2、书籍《深入浅出 Webpack》

这本书可以系统帮你学习 webpack 知识，如果你不想购买书可以看看作者在 GitHub 上的 demo 和在线电子书，非常全面。

http://webpack.wuhaolin.cn/

https://github.com/gwuhaolin/dive-into-webpack

3、极客时间视频资源《玩转 webpack》

如果不想购买课程可以看看免费的课件和代码实现，老师在视频中写的代码都在这里，也是不错的学习资料。

https://github.com/geektime-geekbang/geektime-webpack-course

4、国外免费电子书《Webpack book》

国外的资源写的都比较详细，建议看看。这本书我还没看完，现在正在看。

https://survivejs.com/webpack/introduction/

5、源码

很多概念光看文章很难理解，可以翻一翻源码，比如我学习 webpack 的核心概念 Tapable 的时候，看别人的文章根本理解不了，此时完全可以看源码，然后写写 demo 就理解了。搞懂搞透 webpack 的灵魂 tapable。

https://github.com/webpack/webpack

以上资源，足够搞懂 webpack，是我这么多天看到最好的资料。如果你有好的 webpack 学习资源，欢迎留言分享。最后推荐我写的系列文章：

第 1 天：webpack 究竟是什么，初学者晕头转向

第  2 天：安装 webpack 搞定 Vue 打包

第 3 天：从使用 loader 到实现 loader · webpack

第 4 天：搞定 webpack 的 plugin 不在话下

第 5 天：使用 webpack 动态生成 html

第 6 天：webpack 辅助高效开发

第 7 天：搞懂搞透 webpack 的灵魂 tapable

第 8 天：webpack 与 tapable 擦出火花，实现 plugin 系统

第 9 天：统一管理多项目 webpack 配置文件

更新中 ..........

大家加油！

---

推荐阅读：

webpack 与 tapable 擦出火花，实现 plugin 系统