涨薪面技：如何写 webpack 路径解析插件（1）

站长

2024年03月23日 21:07 · 阅读数 9

一、前文回顾

上文主要讨论了 NormalModuleFactory 类型在模块的创建过程中的主要作用，该类型上的 NMF.prototype.create 方法用于创建模块，其核心原理如下：

触发 nmf.hooks.beforeResolve 接着触发 nmf.hooks.factorize 钩子；
在 nmf 实例创建的过程中会订阅 nmf.hooks.factorize 钩子，主要做了以下工作：
- 2.2 触发 nmf.hooks.resolve 完成 loader、normal 的解析工作；
- 2.2 创建 NormalModule 实例并处理各种 dependencies；
- 2.3 调用 callback 交付新建模块实例；

接着我们还讲述了 nmf.hooks.resolve 的工作流程，主要分为两部分：

解析 normal/pre/post 三种 laoder 的路径；
解析常规模块资源路径；
将解析所得的结果交付到 nmf.hooks.factory 当中的调用；

从前面的回顾的过程中我们可以得知，factory.create 的第一步就是 resolve，而 resovle 的目标就是 loader 和资源模块。

这一篇我们聊 resolve 前的准备工作。

二、resolve & resolver

resolve 的流程也是 webpack 的核心工作流程的重要一环，后面的几篇小作文我们将会围绕这个主题展开，其中包括 resolve 前的准备工作、resolve 的核心库 enahanced-resolve 的源码阅读。

resolve 译为“解析”，resolver 为了区别 parser 我称 resolver 为“路径解析器”，parser 叫解析器（源代码分析）；

三、resolver

resolve 准备工作主要在 NormalModuleFactory 的构造函数执行时注册 nmf.hooks.resolve 钩子当中，前文只是介绍了她的主干流程，今天我们来具体分析其中的工作，但是这部分仅限于 resolve 的准备，不进入 resolve 的过程中。

3.1 创建 laoder Resolver

在 NMF 中，无论是 loader resolver 还是 normal resolver 都是通过调用 nmf.getResolver 方法完成；

this.hooks.resolve.tapAsync(
    {
        name: "NormalModuleFactory",
        stage: 100
    },
    (data, callback) => {
        
        // 1.
        const loaderResolver = this.getResolver("loader");

以上就是 nmf 在 resolve 中先创建 loaderResolver 时调用的 nmf.getResolver 方法，下面我们来看 getResolver 方法；

3.2 nmf.getResolver 方法

该方法是 NMF 的原型方法，代码如下：

class NormalModuleFactory extends NormalModule {
    // ...
    getResolver(type, resolveOptions) {
        return this.resolverFactory.get(type, resolveOptions);
    }
}

这里面的逻辑很简单，将接收到的参数 type 和 resolveOptions 传给 nmf.resolverFactory.get 方法即可获得一个 resolver；

3.2.1 参数

type: 类型，在我们的项目里，只有两种类型 loader 和 normal，其中 laoder 是创建 loader 类型的解析器，normal 则是普通的路径解析器；
resolveOptions：用于创建解析器时传递的参数，这就是 webpack.config.js.resolve 或者 resolveLoader 配置项（注意，该配置项在 WebpackOptionsApply.prototype.process 方法执行时通过订阅 resolverFactory.hooks.resoverOpitons.for 时合并），用于定制解析器的具体行为；

3.2.2 nmf.resolverFactory 哪儿来的？

nmf.resolverFactory 顾名思义，是创建解析器的工厂，这个值在创建 NormalModuleFactory 的实例过程中设定：

class NormalModuleFactory extends NormalModule {
    // ...
    constructor ({ resolverFactory }) {
        this.resolverFactory = resolverFactory
    }
}

可见这玩意儿是传进来的，你还记得是哪里传进来的吗？

当然是实例化 NMF 的时候，这个过程在创建 compiler 实例时传递的给 Compiler 构造函数的，而 NMF 实例作为 compilation 对象实例化的参数创建的。

创建 compiler 实例：

const ResolverFactory = require("./ResolverFactory");
class Compiler {
    constructor () {
        this.resovlerFactory = new ResolverFactory()
    }
}

创建 compilation 实例：

class Compiler {
    createNormalModuleFactory() {  
        const normalModuleFactory = new NormalModuleFactory({  
            resolverFactory: this.resolverFactory // 创建 nmf 实例的时候传入的 ResolverFactory 
        });  
        
        return normalModuleFactory;  
    }
    
    newCompilationParams() {  
        const params = {  
            normalModuleFactory: this.createNormalModuleFactory() // ResolverFactory 实例
        };  
        return params;  
    }
    
    compile(callback) {  
        // 
        const params = this.newCompilationParams();  
       
        // 治理就传给 compilation 了
        const compilation = this.newCompilation(params);
    }
}

上面是 nmf.resolverFactory 的由来；

从 compiler 的代码处可以看到 resolverFactory 来自 ResolverFactory 模块，下面我们来看看这个模块。

四、ResolverFactory

该模块位于：webpack/lib/ResolverFactory.js，简化后的大致结构如下：

module.exports = class ResolverFactory {  
    constructor() {  
        this.hooks = Object.freeze({  
           resolveOptions: new HookMap(() => new SyncWaterfallHook(["resolveOptions"])),  
           resolver: new HookMap(() => new SyncHook(["resolver", "resolveOptions","userResolveOptions"]))  
        });  
        
        this.cache = new Map();  
    }
    

    get(type, resolveOptions = EMPTY_RESOLVE_OPTIONS) {
       // get 方法
    }
    
    _create(type, resolveOptionsWithDepType) {
        // 创建 resolver 实例
    }
}

4.1 构造函数

构造函数无参数，大致逻辑如下：

声明 resolver.hooks，值得注意的是，resolver.hooks 并非是 Hook 类型，而是 HookMap 类型；其中包含两个钩子：
- 1.1 resolverOptions：这个钩子为配置 resolverOptions 设置，通过订阅这个钩子，可以定制 resolver 的行为；
- 1.2 resolver：这个钩子可以用于修改 resolver 的一些默认行为，比如在 webpack 中的 ResolverCachePlugin.js 这个插件中，就是通过修改 HookMap.intercept 方式拦截 resolver，在 resolver 解析的过程中加入优先取用缓存的逻辑；
定义 resolver.cache 对象，这个对象在下面的 get 方法中有用到，对于相同配置的 resolver 创建诉求，resolver 内部返回之前创建过的 resolver 对象。

4.2 get 方法

get 方法用于获取 resolver 对象，也是前面 NMF.prototype.getResolver 内部核心实现的原理。下面我们看看这个方法：

以下是整个核心的实现代码：

module.exports = class ResolverFactory {  
    get(type, resolveOptions = EMPTY_RESOLVE_OPTIONS) {
        // 1.
        let typedCaches = this.cache.get(type);
        if (!typedCaches) {
            typedCaches = {
                direct: new WeakMap(),
                stringified: new Map()
            };
            this.cache.set(type, typedCaches);
        }
        
        // 2.
        const cachedResolver = typedCaches.direct.get(resolveOptions);
        if (cachedResolver) {
            return cachedResolver;
        }
        
        // 3.
        const ident = JSON.stringify(resolveOptions);
       
        
        // 4.
         const resolver = typedCaches.stringified.get(ident);
        if (resolver) {
            typedCaches.direct.set(resolveOptions, resolver);
            return resolver;
        }
        
        // 5.
        const newResolver = this._create(type, resolveOptions);
        
        // 6.
        typedCaches.direct.set(resolveOptions, newResolver);
        typedCaches.stringified.set(ident, newResolver);
        
        // 7.
        return newResolver;
    }
}

4.2.1参数

type：要获取的 resolver 类型，在我们的项目中，type 是 loader 或者 normal，分别对应 loader 的路径解析器和资源模块解析器；
resolveOptions：resolve 的选项对象，来自 webpack.config.js，用户可以通过添加配置定制的解析器行为，不传递时为 EMPTY_RESOLVE_OPTIONS；

4.2.2 逻辑

整个逻辑分为了 7 个步骤：

根据传入的 type 取用对应 type 对应的缓存，保存到 typedCaches 变量；如果 typedCaches 为 falsy 值，则声明 typedCaches 对象，包含 direct 属性，值类型为 WeakMap，另外包含 stringify 属性，值为 Map 类型；声明结束后，以 type 为 key 更新到 resolver.cache 对象；
先尝试在 typedCaches.direct 缓存中查找当前传入的 resolveOptions 对应的 resolver，若缓存中有即 cachedResolver 不为 falsy 值，则直接返回该缓存的解析器；
到这里相当于 typedCaches.direct 缓存中不存在，此时序列化 resolveOptions 得到标识符 ident
然后以 ident 为 key 查找 typedCaches.stringfiy 缓存是否存在，结果保存在 resolver 常量上，若存在则返回 resolver；
此时，到这里说明 typedCaches.direct 和 typedCaches.stringify 缓存中都不存在当前 type 及 resolveOption 对应的 reosolver 对象；此时调用 this._create() 并传入 type 和 resolveOption 重新创建 resover，结果保存到 newReoslver 常量；
新建完成后，更新 typedCaches.direct 和 typedCaches.stringify 缓存对象上，下次再创建相同 type 和 resolveOptions 的解析器时可直接相应缓存内容；
将 5. 中新建的 newResolver 返回；

4.3 _create 方法

module.exports = class ResolverFactory {  
    _create(type, resolveOptionsWithDepType) {
        // 1.
        const originalResolveOptions = { ...resolveOptionsWithDepType };
        // 2.
        const resolveOptions = convertToResolveOptions(
            this.hooks.resolveOptions.for(type).call(resolveOptionsWithDepType)
        );
        
        // 3.
        const resolver = Factory.createResolver(resolveOptions);
       
        
        // 4.
        resolver.withOptions = options => {};
        
        // 5.
        this.hooks.resolver
                .for(type)
                .call(resolver, resolveOptions, originalResolveOptions);
        // 6.
        return resolver;
    }
}

4.3.1 参数

该方法有两个参数：

type：resolver 类型，这里不过多展开；
resolverOptionsWithType：其实就上前文传入的 resolveOptions 对象；

4.3.2 逻辑

缓存 resolverOptionsWithType 到 originalResolveOptions 常量；
触发 resolverFactory.hooks.resolveOptions.for(type) 对应的钩子，获取创建当前 type 对应 resolver 所需的配置项目，最后进行智能合并。不知道你们是否还记得，这些是在哪里配置的？是的前面提到过 WebpackOptionsApply 这个模块中：

class WebpackOptionsApply {

    process () {
        // 这里做的这个工作
    }
}

调用 Factory.createResolver 创建 resolver 解析器，Factory 来自 eanhanced-resolve 库，后文我们展开讲这个库的源码；
声明 resolver.withOptions 方法；
触发 resolverFactory.hooks.resolver 钩子，该钩子用于修改 resolver 的默认行为，前面提到过有个插件 ResovlerCachePlugin 就利用了这个钩子；
返回新建的 resolver；

五、总结

本文详细讲述了 webpack 中的 resolver 的由来及作用：

webpack resolver 用于解析webpack 构建过程中的 request 对应的模块及模块要对应的 loader 的资源路径用的，分为 normal resolver 和 loader resolver 两种类型；
NMF.prototype.getResolver 负责获取 resolver，核心是通过 ResolverFactory.prototype.get 方法实现；
接着我们讨论了 ResolverFactory 类型的构造函数，重点在于声明钩子：
- 3.1 resolveOptions: 用于修改定制 resolver 行为的配置对象；
- 3.2 resolver：用于修改 resolver 默认行为；
详细讨论了 ResolverFactory.prototype.get 方法，内部会优先取用 typedCaches.direct/stringify 缓存，有则返回，没有则调用它 ResolverFactory.prototype._create 方法创建；
ResolverFactory.prototype._create 方法内部主要是触发在 WebpackOptionsApply 中配置的对应 type 的 resolver 选项对象，然后调用 ehanced-resolve 库提供的 Factory.create 方法创建 resolver；接着触发 resolverFactory.hooks.resolver 修改 resolver 的行为并且举例 ResolverCachePlugin；

以上是有关 webpack 中的 Resolver 相关的基础知识，后面我们会展开多次提到的 ResolverCachePlugin 插件以及 enhanced-resolve 这个库的源码；

转载自:https://juejin.cn/post/7346512120639733823