很多时候我们看别人的文章,说看我的文章包你弄明白webapck。
真的是这回儿事儿吗?其实不然。
大多数的文章其实还是照着文档上的内容平铺直叙。讲怎么配置:入口文件,loader , 插件等等那一堆东西。
其实这些东西都是大家在日常开发中经常用的东西。即便是有些配置配不好,我们随时查一下文档就可以了,因为文档上讲的很清楚,入口,输出,loader ,模式, 插件等等,以及简单的内部原理,都有写到。
包括如何去开发一个loader,如何去开发一个插件,这些在文档中都有体现。
image.png
但是只看这些内容就能够真正理解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的掌握程度其实是一个很重要的因素。