按照顺序提取其中一部分关键的环节。如下图:
首先要注意的是this.hook.make.callAsync
和 this.hook.make.tapAsync
这种用法几乎涉及到webpack的各个部分,它使用钩子来串联业务的不同环节。
在上图中对于每个方法所在的文件路径都进行了标注,它的具体位置是工程根目录下的node_modules文件夹。这里所提取的环节全部都是webpack下的,需要注意的是,它在过程中还会涉及到其他的模块。比如 tapable
、webpack-source
、webpack-cli
、style-loader
、css-loader
等。
在Compiler.js
中可以看到 this.hooks.make
对应的是:
对于钩子的用法在前面tapable的文章中介绍过。简单理解为它是一种事件监听的消息机制。tap是订阅者,而call是监听者。监听者监听消息,发布给订阅者。所以执行到 this.hook.make.callAsync
的时候,它会调用 this.hook.make.tapAsync
的回调函数。这里需要强调的时,callAsync 执行的是 tapAsync的回调。所以&#x