前言

上文说道咱们拿到了构建 modlule 的 factory，和依赖等要害数据，通过 addModuleTree 通过 factorizeQueue 的管制走到了 factory.create。这个时候就开始了 reslove 过程。
本文次要剖析，NormalModuleFactory 外部 beforeResolve,factorize,resolve, afterResolve 这几个钩子。

配置文件

本文围绕的配置文件如下：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {test: /\.(js?|tsx?|ts?)$/,
        use: [
            {loader: 'babel-loader',},
        ],
    },
    ]
  },
  resolve: {extensions: ['.js', '.ts'],
    alias: {demo: path.resolve(__dirname, 'src/second'),
    },
  },
};

factory.create

入口从 factory.create 开始，这里的 factory 是之前 addModuleTree 获取到的 NormalModuleFactory

NormalModuleFactory 先触发了其外部的 beforeResolve 钩子，而后在回调里执行了 factorize 钩子函数。
factorize 钩子内有又调用了resolve。

这里看起来比拟绕，简略解释一下：
钩子的调用程序，就像是这样。
beforeResolve -> factorize -> resolve

• beforeResolve 没找到之前注册过的中央，看起来什么都没干，也有可能是我没找到
• factorize 之前在 ExternalModuleFactoryPlugin插件中注册过，这里会解决下 external 的信息。
• resolve 钩子注册在 NormalModuleFactory 外部，用于解析这个 module，生成对应的 loader 和依赖信息，这里的重点就在resolve

resolve

getLoaderResolver

进来的第一步 resolve 钩子先调用了this.getResolver("loader") 返回 loaderResolver，这个能够了解为是解析 loader 的办法。
简略过一下分为以下几步：

• 调用到了 ResolverFactory里的 get 办法
• 判断是否有对应类型的缓存
• 创立 resolveOptions,
• 调用 require("enhanced-resolve").ResolverFactory 创立了一个 resolver，而后返回 NormalModuleFactory继续执行代码。

const loaderResolver = this.getResolver("loader");

loaderResolver裸露了一个 resolver 办法，用于解析loader。

normalResolver

接着往下走，略过一些判断，间接走到了 defaultResolve 这个办法，这里会依据 webpack 配置文件中的 resolve 选项, 生成一个 normalResolver。同样的，这个 normalResolver 也是 require("enhanced-resolve").ResolverFactory 的实例，也暴露出了一个 resolve 办法。

const normalResolver = this.getResolver(
    "normal",
    dependencyType
        ? cachedSetProperty(
            resolveOptions || EMPTY_RESOLVE_OPTIONS,
            "dependencyType",
            dependencyType
      )
    : resolveOptions
);

接下来会把这个 normalResolver 和一些上下文信息传给resolveResource 办法，这里最终会调用到 node_modules/enhanced-resolve/lib/Resolver.js 的doResolve。

this.resolveResource(
    contextInfo,
    context,
    unresolvedResource,
    normalResolver,
    resolveContext,
    (err, resolvedResource, resolvedResourceResolveData) => {if (err) return continueCallback(err);
        if (resolvedResource !== false) {
            resourceData = {
                resource: resolvedResource,
                data: resolvedResourceResolveData,
                ...cacheParseResource(resolvedResource)
            };
        }
        continueCallback();}
);

而后依据 doResolve 返回的 resolvedResource 和resolvedResourceResolveData一起拼装成resourceData。咱们在后续解析 loader 的时候还会用到这个。

resourceData数据结构

解析 loader

在 resolvedResource 的回调里继续执行

const result = this.ruleSet.exec({
    resource: resourceDataForRules.path,
    realResource: resourceData.path,
    resourceQuery: resourceDataForRules.query,
    resourceFragment: resourceDataForRules.fragment,
    scheme,
    assertions,
    mimetype: matchResourceData
    ? "": resourceData.data.mimetype ||"",
    dependency: dependencyType,
    descriptionData: matchResourceData
    ? undefined
    : resourceData.data.descriptionFileData,
    issuer: contextInfo.issuer,
    compiler: contextInfo.compiler,
    issuerLayer: contextInfo.issuerLayer || ""
});

这里会依据配置文件里的 rules 失去须要的 loader，这个例子里，咱们的 result 是

接下来会通过这个 result 的遍历，生成 useLoadersPost, useLoaders, useLoadersPre。
而后调用 resolveRequestArray 失去postLoaders, normalLoaders, preLoaders。

this.resolveRequestArray(
  contextInfo,
  this.context,
  useLoaders,
  loaderResolver,
  resolveContext,
  (err, result) => {
    normalLoaders = result;
    continueCallback(err);
  }
);

以后例子并没有 postLoaders 和preLoaders，这里只有 normalLoaders。resolveRequestArray 外部调用 loaderResolver.resolve 解析 useLoaders, 最初后果就是把result 里的 loader 替换成了对应的实在文件地址。

{
  ident:undefined
  loader:'/Users/csy/Code/webpack5/node_modules/babel-loader/lib/index.js'
  options:undefined
}

生成回调数据

最初在 continueCallback 解决下曾经生成好的数据，首先是对 loader 的合并。把 postLoaders, normalLoaders, preLoaders 这几个合并。而后 assign 一下 data.createData, 这个data 来自于钩子的入口传入的 data。

Object.assign(data.createData, {
    layer:
        layer === undefined ? contextInfo.issuerLayer || null : layer,
    request: stringifyLoadersAndResource(
        allLoaders,
        resourceData.resource
    ),
    userRequest,
    rawRequest: request,
    loaders: allLoaders,
    resource: resourceData.resource,
    context:
        resourceData.context || getContext(resourceData.resource),
    matchResource: matchResourceData
        ? matchResourceData.resource
        : undefined,
    resourceResolveData: resourceData.data,
    settings,
    type,
    parser: this.getParser(type, settings.parser),
    parserOptions: settings.parser,
    generator: this.getGenerator(type, settings.generator),
    generatorOptions: settings.generator,
    resolveOptions
});

这里着重讲一下 getParser 和getGenerator, 这两个办法返回的是对应文件的解析器和构建模板的办法。依照以后示例，返回的是 JavascriptParser 和JavascriptGenerator。

而后这个 createData 将被用于 createModule。
在执行完 NormalModuleFactory 的afterResolve钩子后

const createData = resolveData.createData;
this.hooks.createModule.callAsync(//something)

reslove 完结了，行将开始下一步，创立module!

小结

• module resolve 流程用于取得各 loader 和模块的绝对路径等信息。
• 在 resolver钩子里，先通过 enhanced-resolve 获取 loaderResolver，提供 resolve 办法
• 在 defaultResolve 办法里，获取 normalResolver, 提供 resolve 办法。
• 解析 unresolvedResource，失去文件的绝对路径等信息
• 依据 rules 失去 loader
• 应用 loaderResolver 失去 loader 的绝对路径等信息
• 合并 loader, 拼接数据，
• 调用 NormalModuleFactory的 afterResolve 钩子，完结 resolve 流程。