（源码篇01）浅析webpack5中Compiler中重要的hook调用过程

今天的内容只有一个：浅析webpack5中Compiler中重要的hook调用。

1. 浅析 中的第一个核心hook 是

此hook的入参是

1.1 查看绑定 的插件的数据

进入此hook，发现只有一个监听的插件：。

进入 的插件中，代码如下：

发现此插件 又实例化了 一个 的对象，但是 方法上 传入的是   数据。聪明的小伙伴可以想一下此处是为了啥？进入 内部，看一下其内部实现是什么？代码如下：

会发现这个插件实际上也就是监听了一下 的事件。

1.2 总结

总体来说： 里的 的主要作用就是通过 监听了 的事件。

2. 继续调试 的 hook

2.1 创建 天选打工人

截图奉上 下一步的逻辑

会发现走到了 方法，通过规范的命名就知道，此方法是创建一个此次编译构建用的 一次性对象，注意此处说的是一次性对象，表述上可能存在差异，给兄弟们放上解释。【我感觉可以简单理解为一次完整编译构建过程中的数据载体】。

具体代码如下：

核心也就是在这里了，通过 传递 参数，创建 的实例对象。

创建完毕以后，开始 传入 调用 的hook了。

下一步就是开始调试 的 hook。

3. Compiler 创建了 compilation，开始调用 的 hook

3.1 查看绑定 的插件的数据

继续 调试进入此hook

这个hook竟然有 10个 插件监听它，先进入第一个插件

发现这个插件都是在给 绑定一下 监听事件，并没有做什么实际的操作，继续下一个插件。

进入以后，发现也是在进行给 绑定监听事件。直接进入 最后一个插件

发现也是在给 绑定一堆的监听事件。

好家伙，这是要把 给累死呀，

3.2 的 总结

总结： 中的 的 hook，就是在疯狂的给 通过各种插件 挂各种的 监听事件，弹药准备完毕，等待一触即发。

（内心想法：我可真是太难了。。。）

4. Compiler 继续 触发 的 hook

4.1 查看绑定的插件的数据

继续进行下一步 调试。

我直接疯了啊，这 的 的 hook 竟然绑定了 个监听的插件。

我 giao哥 直接疯掉。而我和大家作为优秀的 程序员，那不就是多点54次调试吗？进入第一个插件

4.2 进入 插件

这又是给 对象 【注意不是hook名称】，绑定了一身的 监听事件。

继续看下一个插件的，下一个插件是

4.3 进入 插件

的代码如下：

看到了上面的一部分， 对象终于开心了，终于不仅仅是给我绑定监听事件了，这次轮到了 ，心里美滋滋。

继续看下面一部分代码，

去求吧， 对象还是逃不过被绑定监听事件的命运，【注意此处的hook名称是不同的】。

继续进入下一个插件

4.4 进入 插件

给 绑定 监听事件

4.5 进入 插件

给 和 绑定 监听事件

4.6 进入 插件

这个插件 终于不绑定事件了，仅仅是 向 中塞入了一对数据。

4.7 进入 插件 【核心】

这个插件的代码量是真的多，看名字分析这个插件应该是处理运行时的数据

简单看下里面的部分内容：

4.7 进入 插件

给 绑定 监听事件

4.8 直接干到最后一个 插件

也是在给 辛苦的 的身上 挂载监听事件。

4.9 总结

总的来说， Compiler 触发 的 hook 本质上是给我们辛勤的打工人 对象 的 不同的数据处理阶段 绑定不同的插件。

5 继续 的下一个hook

走完 的调用流程后，下一步就是调用   的 的hook了。

5.1 查看绑定的插件的数据

nice 的很，这个 hook 仅仅 有一个叫 的插件进行绑定。

5.2 进入 插件 【 compilation 对象解析的开始】

核心代码截图如下：

你会发现这个插件就是调用了   的方法，没有做其他逻辑。那就开始分析此函数的入参，。查看一下入参的数据，如下图

你就会显而易见的发现 这个是主角了，那 又是由 创建的，查看 静态方法：

直接看 这个 dep 对象的数据 都有啥：

是不是看到了，熟悉的webpack 中的 和 此 dep 对象的 属性是一致的呢？

5.3 进入 compilation 中 查看， 方法

上代码

此函数仅仅是做了数据处理，真正干活的还在 函数中，进入 函数

你会发现此函数 调用了 【注意此时的 this 指的的是 对象】，进入此 hook

并没有插件 监听它，直接进入下一行代码：调用 方法。

5.4 进入 的方法

处理完数据以后，又进入一个 的方法。

5.5 进入 的方法

又进入 的方法

5.6 进入 的方法

你会发现它是在Compilation 的原型上绑定的一个方法,其主要的作用就是 向 中添加了一个数据。然后就么有然后了？？？？

老规矩：总结

里的 的主要作用就是通过 监听了 的事件。

的 hook  传递 参数 给 方法，创建 的实例对象

中的 的 hook，就是在疯狂的给 对象 通过各种插件 挂各种的 监听事件，弹药准备完毕，等待一触即发

中的 的 hook 本质上也是给我们辛勤的打工人 对象的阶段，绑定不同的插件。

中的 的hook，主要是 通过 插件，解析我们传入的entry属性，并调用 的方法，进而通过一系列的数据处理，最后将数据塞入到 的 中。

在一个类似 队列的数据中添加了，就没有然后了吗？到底怎么开始启动的呢？怎么没有见到 调用之前的hook呢？

其实上面的疑问都会在下一篇的 中，进行讲解，敬请期待。