关于javascript:webpack-流程解析-5-module-reslove

上文说道咱们拿到了构建 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 是之前 addModuleTree 获取到的 NormalModuleFactory

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

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

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

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

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

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

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

接着往下走，略过一些判断，间接走到了 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数据结构

在 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 流程。

关于javascript:webpack-流程解析-5-module-reslove

前言

配置文件

factory.create

resolve

getLoaderResolver

normalResolver

解析 loader

生成回调数据

小结