webpack 原理解析

我们通过webpack的代码执行顺序一步一步的探索webpack的执行原理

首先我们在开始学习webpack的原理之前，先普及两个知识

1. 事件监听模式
2. 语法树
   webpack整个设计框架采用的是事件监听模式，第二个是使用javascript的语法解析器，解析出模块的依赖。

本篇文章，从以下四个角度来分析webpack

1. webpack的参数的初始化
2. webpack的loader的调用
3. webpack的语法树是怎么生成的
4. webpack的plugin的调用

开始

使用webpack2.0来分析，通常版本越低代码越简单一些，但是主体思想还是在这里面的。

第一部分weipack的入口参数的初始化

这里我们可以看到两个红色框起来的部分，第一部分是初始化webpack的配置，这里面除了初始化参数外，应用了许多webpack的自带的plugins注册监听了webpack的事件，看看截图
（建议看到这里的时候可以尝试自己写一些plugin来加深plugin的理解）

初始化参数

webpack注册自带的plugin

第二部分

当webpack的参数初始化完成，并且Complier对象创建好时，开始运行run的方法，看下run里面是怎么写的。
总共是6步，这6步代表着webpack的主流程，我们接下来就按这6步来看下他们各自的职责。

触发before-run事件

这时候监听before-run的plugins便会执行。

触发run事件，

这时候一样监听了run事件的plugins便会执行。举个例子，以下自定义一个plugin并且注册监听run事件：

执行npx webpack ，到这里对应的自定的plugin被自行了，打印出了plguin的内容。应该能理解plugin怎么被调用了。

创建records

这是我们在webpack.config.js中的一个配置，可以去查询下这个配置的用途。开启这个选项可以生成一个 JSON 文件，其中含有 webpack 的 “records” 记录 - 即「用于存储跨多次构建(across multiple builds)的模块标识符」的数据片段。可以使用此文件来跟踪在每次构建之间的模块变化。

compile

我们可以看到这个方法有一个回调函数，并且有一个参数是compilation。这步是创建compliation，并且触发compliation事件，相关监听compliation的plugin便会开始执行，我们看下里面的代码

这里有两个红框

生成compliation对象，并触发compilation事件

还记得第一步初始化的时候，有注册一些默认的plugin吧。拿一个重要的plugin来举例。SingleEntryPlugin监听了compliation事件，当上面的代码触发了这个事件后，给compliation对象加上normalmodulefactory

触发make事件

还是上面的那个SingleEntryPlugin，他的make事件就要执行了。addEntry这里开始创建依赖树的入口了。继续往里看_addModuleChain，这里使用了刚刚compliation加入的factory对象，由他创建模块module。到这里可以回头仔细看看创建compliation对象那一步，看看这个工厂NormalModuleFactory怎么来的。

创建module

继续NormalModuleFactory往里面看，这里通过这个通过factory创建了一个module

NormalModule

factory方法内部生成了一个NormalModule对象

buildModule

module已经创建好了一个壳，回到NormalModuleFactory.create的外部回调方法，执行buildModule方法

module.build

buildModule，执行了module.build方法来实现module的构建

dobuild & Parse

module.build，调用dobuild内部是去找loader生成的source的文件。接着Parse调用语法解析，生成语法树。从语法树种得到module的依赖模块。

loader

dobuild内部是查找到loader的，并且生成文件的source

递归依赖

buildModule 执行完后，回到外部的回调方法。到这里已经使用了loader得到了module的source和依赖，那这时候应该是要递归解析依赖的时候了，这里会是一个递归的过程，会回去调用factory的create方法，生成module，并调用loader

emit & done

compile 结束后，触发emit事件和done事件，相关监听这两个事件的plugins会触发。