webpack造轮子开篇:轮子架构

447 阅读3分钟

这是本专栏的第一篇文章,也是再造一个webpack轮子的开篇。

1. 轮子的重要性

为什么重复造轮子?特别是webpack这么复杂的构建系统,那么繁多的生态链,肯定不如现有的好啊。 是的,我知道自己的力量目前并不足以造出更好的轮子,甚至可能只造出一个简易轮子,无法在轮子之上负重太多。但是我认为这并不重要,造轮子的过程,是一个总结+上升的过程。在自己实现的时候,不仅能够从框架底层更深入的了解webpack的底层原理,对webpack有一个更深入的了解,对它的pluginsloader能够知根知底,对它的hotLoad能够知悉其原理, 而且在造轮子的时候可能还能够发现这种模式的短板。 我认为这就是造轮子的精髓,目前能够走到这一步也是个阶段性的胜利。

此专栏的造轮子特点

我在此专栏中,尽量不去直接分析webpack的源码,希望能够分析到作者们为什么要这么做,如果要让我做,我应该怎么做,然后在此基础上,对源码进行一个重要点的解读。

所以,我可能会不断的唠叨一些概念,不断的唠叨一些逻辑,可能写的代码也会有推翻重来的情况。但这也并不那么重要,重要的是不断量变到质变的过程,在这其中,也是我自己不断提升的过程。

轮子的建造方法论

考虑的是由面及点,再由点及面的方式,大概分这么几部分:

    1. 继续用几十行代码造一个轮子的最简化框架,也就是轮子的中心轴(最核心逻辑)。
    1. 从中心轴做外扩的准备 (增加生命周期钩子)。
    1. 增加辐条(增加Plugin、loader)
    1. 增加外圈(es6转为es5、增加dev-middleware,hot-middleware等中间件)

这样, 一个新的轮子就产生了,能够进行深入的实验,甚至能够应用到生产中。

毕竟,轮子是人类进步的重要发明,同时,因为不断的重复造轮子,才让轮子不断变化,不断更新,不断提高生产力。从原木滚动运输,到木轮子的使用,到今天汽车轮子、飞机轮子的大量使用,不就是最好的证明么。哈哈,感觉为自己的造轮子找到了很好的例证。

下面,就根据方法论,一步一步的重造轮子。 因为平时工作压力很大,所以尽量的利用周末时间,休息间隙进行更新,各位看官且耐心等待。同时,也欢迎各位加入到本专栏的编写当中,共同把轮子造好~~

由于时间或当时的冲动等因素,我在写的时候,可能也不会完全按照上面的步骤进行。 但我想,随着后面文章越来越多,我会不断进行整理,使之越来越有条理。