webpack中的Loader在编译过程中是如何应用的，最终输出的打包内容在什么位置

按照顺序提取其中一部分关键的环节。如下图：

首先要注意的是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