太强了，3000字图文并茂的解析 webpack 核心库 enhanced-resolve 工作流程和插拔式插件机制，真香

0. 食用本文的文档说明：

因为篇幅有限，希望你掌握以下前置条件：

• 希望你最好了解 订阅发布模型
• 希望你知道tapable 的 以下 3 个钩子函数AsyncSeriesBailHook, AsyncSeriesHook, SyncHook

通过本文你将学到如下内容（或者带着如下疑问去学习）

• 如何调试一个 nodejs 开源库
• 了解 webpack 解析库 enhance-resolve 的大致工作流程
• 初步了解 webpack/enhance-resolve 中 tapable 的使用，以及插件机制实现的原理 （这里写 webpack，是因为二者的插件机制是一样的实现原理）

1. 初步了解该库的作用，明白这个库是干啥的？

想初步了解一个库的作用，以及建立初衷，最好的方式就是阅读当前库的README.md(前提是该库作者维护了此文档 😊)。

README.md内容如下：

<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c0b0bd2c32c4d6799693b3f71a5a349~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?) 大家想了解关于原生的 require.resolve 的介绍可以看这篇文章 ===> [node 的路径解析 require.resolve - 掘金 (juejin.cn)](https://juejin.cn/post/6844904055806885895 “https://juejin.cn/post/6844904055806885895"” style=“margin: auto” />

该库也是作为 webpack 里核心的依赖解析库存在，在 webpack.config.js 里配置的 resolve 字段 实际上就是当做参数传递给该库的，所以深入的了解一下该库的工作原理以及插件机制的实现，也有益于 webpack 的优化 和 后期阅读 webpack 源码。

2. 拉取并跑起来一个简单的 demo，初步了解该库对于 resolve 的 enhance （增强）

GitHub 地址如下：webpack/enhanced-resolve: Offers an async require.resolve function. It’s highly configurable. (github.com) PS: 国外访问较慢，强烈推荐 使用 Gitee 导入该仓库 【不会吧，不会吧，都 2023 年了，竟然还有人不知道这个方法？📚】

代码拉取完毕以后，观察项目目录，发现使用的 yarn，执行 yarn install 进行安装依赖安装。如果没报错的话，写一个简单的 demo 小试牛刀。

新建一个 demo 文件夹，并创建 test-hook.js (名称可以自定义)，然后写入如下内容：

const { ResolverFactory, CachedInputFileSystem } = require("../lib");
const fs = require("fs");
const path = require("path");

const myResolver = ResolverFactory.createResolver({fileSystem: new CachedInputFileSystem(fs, 4000),extensions: [".json", ".js", ".ts"],
});

const context = {};
const resolveContext = {};
const lookupStartPath = path.resolve(__dirname);
const request = "./a";
myResolver.resolve(context,lookupStartPath,request,resolveContext,(err, path, result) => {if (err) {console.log("createResolve err: ", err);} else {console.log("createResolve path: ", path);}}
); 

新建 a.js 文件（不必写入内容，该库只做路径解析）， 此时文件目录如下：

运行test-hook.js 输出如下：

demo 运行成功，第 2 关通过

3. 开启 Debug 模式，分析大体逻辑

本人喜欢用 webStorm 进行调试 （之前是搞 Python 开发的，习惯了）。

3.1 webStorm 使用 debug 模式 （不是本文重点，简单说明一下）

webStorm 的只需要 当前文件 下 右击，然后 点击 Debug test-hook.js 即可

3.2 vscode 使用 debug 模式

vscode 的