webpack 原理解析

webpack执行原理详解：参数初始化、loader调用与plugin机制

最新推荐文章于 2024-09-13 09:46:24 发布

原创最新推荐文章于 2024-09-13 09:46:24 发布 · 684 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文深入剖析webpack的执行流程，从参数初始化、内置plugin注册到loader的调用，再到语法树生成和plugin的执行。通过六个步骤解析webpack的核心工作模式，包括before-run、run、compile、make等事件，以及如何创建module、构建语法树和触发emit及done事件。同时，文章介绍了如何理解和实践webpack plugin，帮助读者掌握webpack的工作原理。

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

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

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

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

webpack的参数的初始化
webpack的loader的调用
webpack的语法树是怎么生成的
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怎么来的。
在这里插入图片描述