第七十五期:对node和webpack的一些思考

2022-07-15 10:51:49 浏览数 (1)

很多时候我们看别人的文章,说看我的文章包你弄明白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的掌握程度其实是一个很重要的因素。

0 人点赞