第七十五期：前端真正理解WebPack难吗

这里记录工作中遇到的技术点，以及自己对生活的一些思考，周三或周五发布。

很多时候我们看别人的文章，说看我的文章包你弄明白webapck。

真的是这会儿事儿吗？其实不然。

大多数的文章其实还是照着文档上的内容平铺直叙。讲怎么配置：入口文件，loader , 插件等等那一堆东西。

其实这些东西都是大家在日常开发中经常用的东西。即便是有些配置配不好，我们随时查一下文档就可以了，因为文档上讲的很清楚，入口，输出，loader ,模式， 插件等等，以及简单的内部原理，都有写到。

包括如何去开发一个loader，如何去开发一个插件，这些在文档中都有体现。

但是只看这些内容就能够真正理解webpack的原理吗？

答案肯定是否定的。

这些东西只是告诉我们怎么去使用webpack这个工具。真正想要弄明白它的运行原理，需要我们花点功夫去研究一些相关的东西。比如Node，比如和它相关的一些算法，类似文件解析的具体过程。

想要真正弄明白webpack，需要我们自己去思考一些问题。比如：

• webpack是干什么用的？
• 它的实现原理是什么？
• 除了这个方法之外，有没有别的实现方式？
• 它的模块是如何解析的
• 解析的具体过程是怎么实现的
• 为什么要生成依赖图
• 依赖图有什么用
• 为什么要实现热替换
• 怎么实现热替换
• loader是什么
• 怎么实现loader

有了这一系列的思考之后，我们才能对具体的问题做出正确的研究。

不能说，我今天看了一篇文章感觉讲的挺好，很有价值。但是如果没有自己的思考在里面，两三天就忘了，还是没有学会，这些知识还是没有成为自己的知识。

我自己其实也只是会用webpack，我也不明白它内部的原理。当然我也看了很多文章，试图通过别的文章来让自己弄明白webpack的原理，但是最后发现，其实大部分讲的还是文档上的内容。

因为之前一直想再系统的学习一下Node，原因是因为虽然能够用express，koa等框架去做些简单的应用。但是对其中的一些原理其实还是不理解。

然后这几天一直在看Node相关的东西。

看着看着，发现webpack本质上不也是用Node写的吗？

用Node起一个服务，fs模块监听文件变动，socket模块进行消息通知，实现热更新，这些东西完全就是Node里面的内容啊。再加上一些文件解析，拆分chunk的一些方法，不就是webpack吗？

当然，我自己本身并没有去看过webpack的源码，这些只是我的一个猜测。

但是，在看Node的过程中，我们会发现，抛开Node去谈webpack的原理感觉有些不切实际。

比如说，我们本地启动项目，终端会输出项目的构建过程。

接下来我们就可以思考：

• 为什么终端能够输出这个过程呢？
• 输出这个过程是通过Node的哪个模块实现的？
• 输出的你内容是带格式的，这个格式是怎么实现的？

我们修改文件后保存，终端也会更新。这个必然是用了文件监听相关的模块，比如fs.watch 或者fs.watchFile。但是这两个方法在跨平台上可能会有些问题，那么它是怎么处理的呢？

假如我们需要处理的文件特别大，10M，20M或者100M，这时候它又是通过什么实现的呢？ 通过Streams流吗？还是一些别的方法呢？

如果没有这些思考，我们对webpack的理解可能会一直停留在【知其然，不知其所以然】的阶段。

最后，我想表达的是，其实webpack也好，其他的npm模块也好，他们的共性在哪里呢？

在Node，我们搭建项目，开发模块，开发插件，开发让我们引以为傲的脚手架，最根本的还是在于我们对Node的熟练运用。

我们知道哪些模块可以做哪些事情，哪些场景应该用哪些模块去处理。

而想要真正理解webpack原理，对Node的掌握程度其实是一个很重要的因素。

• 公众号《JavaScript高级程序设计》
• 公众号内回复”vue-router“ 或 ”router“即可收到 VueRouter源码分析的文档。
• 回复”vuex“ 或 ”Vuex“即可收到 Vuex 源码分析的文档。

全文完，如果喜欢。

请点赞和"在看"吧，最好也加个"关注"，或者分享到朋友圈。