前言

上文說(shuō)道我們拿到了構(gòu)建modlule的factory，和依賴等關(guān)鍵數(shù)據(jù)，通過(guò)addModuleTree經(jīng)過(guò)factorizeQueue的控制走到了factory.create。這個(gè)時(shí)候就開始了reslove過(guò)程。
本文主要分析，NormalModuleFactory 內(nèi)部 beforeResolve,factorize,resolve, afterResolve 這幾個(gè)鉤子。

配置文件

本文圍繞的配置文件如下：

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 先觸發(fā)了其內(nèi)部的 beforeResolve 鉤子，然后在回調(diào)里執(zhí)行了 factorize 鉤子函數(shù)。
factorize 鉤子內(nèi)有又調(diào)用了resolve。

這里看起來(lái)比較繞，簡(jiǎn)單解釋一下：
鉤子的調(diào)用順序，就像是這樣。
beforeResolve -> factorize -> resolve

beforeResolve 沒(méi)找到之前注冊(cè)過(guò)的地方，看起來(lái)什么都沒(méi)干，也有可能是我沒(méi)找到
factorize 之前在 ExternalModuleFactoryPlugin插件中注冊(cè)過(guò)，這里會(huì)處理下external的信息。
resolve 鉤子注冊(cè)在NormalModuleFactory內(nèi)部，用于解析這個(gè)module，生成對(duì)應(yīng)的loader和依賴信息，這里的重點(diǎn)就在resolve

resolve

getLoaderResolver

進(jìn)來(lái)的第一步resolve 鉤子先調(diào)用了this.getResolver("loader") 返回loaderResolver，這個(gè)可以理解為是解析loader的方法。
簡(jiǎn)單過(guò)一下分為以下幾步：

調(diào)用到了 ResolverFactory里的get方法
判斷是否有對(duì)應(yīng)類型的緩存
創(chuàng)建 resolveOptions,
調(diào)用require("enhanced-resolve").ResolverFactory創(chuàng)建了一個(gè) resolver，然后返回 NormalModuleFactory繼續(xù)執(zhí)行代碼。

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

loaderResolver暴露了一個(gè)resolver方法，用于解析loader。

normalResolver

接著往下走，略過(guò)一些判斷，直接走到了defaultResolve這個(gè)方法，這里會(huì)根據(jù)webpack配置文件中的resolve選項(xiàng),生成一個(gè) normalResolver。同樣的，這個(gè)normalResolver也是require("enhanced-resolve").ResolverFactory的實(shí)例，也暴露出了一個(gè)resolve方法。

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

接下來(lái)會(huì)把這個(gè)normalResolver 和一些上下文信息傳給resolveResource方法，這里最終會(huì)調(diào)用到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();
    }
);

然后根據(jù)doResolve返回的resolvedResource和resolvedResourceResolveData一起拼裝成resourceData。我們?cè)诤罄m(xù)解析loader的時(shí)候還會(huì)用到這個(gè)。

resourceData數(shù)據(jù)結(jié)構(gòu)

解析loader

在resolvedResource的回調(diào)里繼續(xù)執(zhí)行

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 || ""
});

這里會(huì)根據(jù)配置文件里的rules得到需要的loader，這個(gè)例子里，我們的result是

接下來(lái)會(huì)通過(guò)這個(gè)result的遍歷，生成useLoadersPost, useLoaders, useLoadersPre。
然后調(diào)用resolveRequestArray得到postLoaders, normalLoaders, preLoaders。

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

當(dāng)前例子并沒(méi)有postLoaders和preLoaders，這里只有normalLoaders。resolveRequestArray內(nèi)部調(diào)用loaderResolver.resolve解析useLoaders,最后結(jié)果就是把result里的loader替換成了對(duì)應(yīng)的真實(shí)文件地址。

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

生成回調(diào)數(shù)據(jù)

最后在continueCallback處理下已經(jīng)生成好的數(shù)據(jù)，首先是對(duì)loader的合并。把postLoaders, normalLoaders, preLoaders這幾個(gè)合并。然后assign一下data.createData, 這個(gè)data來(lái)自于鉤子的入口傳入的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, 這兩個(gè)方法返回的是對(duì)應(yīng)文件的解析器和構(gòu)建模板的方法。按照當(dāng)前示例，返回的是JavascriptParser和JavascriptGenerator。

然后這個(gè)createData將被用于createModule。
在執(zhí)行完NormalModuleFactory的afterResolve鉤子后

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

reslove結(jié)束了，即將開始下一步，創(chuàng)建module!

小結(jié)

module resolve 流程用于獲得各 loader 和模塊的絕對(duì)路徑等信息。
在resolver鉤子里，先通過(guò)enhanced-resolve獲取 loaderResolver，提供 resolve 方法
在defaultResolve 方法里，獲取 normalResolver, 提供 resolve 方法。
解析unresolvedResource，得到文件的絕對(duì)路徑等信息
根據(jù)rules得到 loader
使用 loaderResolver 得到loader的絕對(duì)路徑等信息
合并 loader, 拼接數(shù)據(jù)，
調(diào)用NormalModuleFactory的afterResolve鉤子，結(jié)束resolve流程。

點(diǎn)擊左下角閱讀原文，到 SegmentFault 思否社區(qū) 和文章作者展開更多互動(dòng)和交流，掃描下方”二維碼“或在“公眾號(hào)后臺(tái)“回復(fù)“ 入群 ”即可加入我們的技術(shù)交流群，收獲更多的技術(shù)文章~

- END -

點(diǎn)贊

評(píng)論

舉報(bào)