[FE] resolver.hooks.noResolve

1. 背景

在使用webpack的时候，Can't resolve ... in ...这样的错误真是屡见不鲜了。
这种错误源于webpack没有找到相关的资源，
那么webpack到底是去什么地方找了呢？寻找方式是什么呢？

webpack默认的出错信息并没有写清楚，

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'xyz' in '/Users/thzt/projj/github.com/thzt/debug-webpack/src'
 @ ./src/index.js 1:0-22

以上错误提示，只是说明webpack找不到xyz这个模块，
并没有写明，webpack的寻找方式。

2. Resolver

webpack并没有使用node默认的查找资源的方式，
而是自己写了一个Resolver。

在 webpack/lib/ResolverFactory.js 第60行，webpack 调用了 enhanced-resolve 模块创建了一个 resolver，

const Factory = require("enhanced-resolve").ResolverFactory;
...

module.exports = class ResolverFactory extends Tapable {
  ...

  _create(type, resolveOptions) {
    ...
    const resolver = Factory.createResolver(resolveOptions);
    ...
    this.hooks.resolver.for(type).call(resolver, resolveOptions);
    return resolver;
  }
}

enhanced-resolve/lib/Resolver.js 第49行给 resolver 添加了 noResolve hooks，

this.hooks = {
  resolveStep: withName("resolveStep", new SyncHook(["hook", "request"])),
  noResolve: withName("noResolve", new SyncHook(["request", "error"])),
  resolve: withName("resolve", new AsyncSeriesBailHook(["request", "resolveContext"])),
  result: new AsyncSeriesHook(["result", "resolveContext"])
};

因此，我们就可以通过 noResolve 这个hooks 来获取模块加载失败的信息了。

3. compiler.resolverFactory.hooks.resolver

class MyPlugin {
  apply(compiler) {
    compiler.resolverFactory.hooks.resolver.for('normal').tap('MyPlugin: normal resolver', resolver => {
      resolver.hooks.noResolve.tap('MyPlugin', (request, error) => {
        console.log('resolver.hooks.noResolve.for(normal)', request, error);
      });
    });

    compiler.resolverFactory.hooks.resolver.for('context').tap('MyPlugin: context resolver', resolver => {
      resolver.hooks.noResolve.tap('MyPlugin', (request, error) => {
        console.log('resolver.hooks.noResolve.for(context)', request, error);
      });
    });

    compiler.resolverFactory.hooks.resolver.for('loader').tap('MyPlugin: loader resolver', resolver => {
      resolver.hooks.noResolve.tap('MyPlugin', (request, error) => {
        console.log('resolver.hooks.noResolve.for(loader)', request, error);
      });
    });
  }
}

其中，compiler.resolverFactory.hooks.resolver是一个 HookMap，
源码位于，webpack/lib/ResolverFactory.js 第19行，

this.hooks = {
  resolveOptions: new HookMap(
    () => new SyncWaterfallHook(["resolveOptions"])
  ),
  resolver: new HookMap(() => new SyncHook(["resolver", "resolveOptions"]))
};

查看 HookMap Interface，可知 HookMap 中的某一个 hook 可以通过 .for(name) 来获取，
因此，这里写了

compiler.resolverFactory.hooks.resolver.for('normal')
compiler.resolverFactory.hooks.resolver.for('context')
compiler.resolverFactory.hooks.resolver.for('loader')

对应了三种 resolver，详见Resolvers - Types。

'normal': Resolves a module via an absolute or relative path.
'context': Resolves a module within a given context.
'loader': Resolves a webpack loader.

（1）normal对应了通过绝对或相对路径加载模块的方式，例如，

require('xyz');

（2）context对应了 require.context 的模块加载方式，例如，

require.context('./lib');

（3）loader是当webpack加载指定资源对应loader时触发的。

4. resolver.hooks.noResolve

resolver 的 noResolve hook的写法如下，

resolver.hooks.noResolve.tap('MyPlugin', (request, error) => {
  console.log('resolver.hooks.noResolve.for(normal)', request, error);
});

下面我们用 normal resolver 的加载失败，来说明 request 和 error 的数据结构，

参数说明：

request: {
  context: {
    issuer,  // 父模块绝对路径
  },
  path,      // 项目根目录
  request,   // 模块名
}

error: {
  details,   // 路径解析堆栈
  message,   // 错误消息
  missing,   // 查找过程
  stack,     // 错误堆栈
}

其中，
（1）request.context.issuer

"/Users/thzt/projj/github.com/thzt/debug-webpack/src/index.js"

（2）request.path

"/Users/thzt/projj/github.com/thzt/debug-webpack/src"

（3）request.request

"xyz"

（4）error.missing

[
    "/Users/thzt/projj/github.com/thzt/debug-webpack/src/node_modules",
    "/Users/thzt/projj/github.com/thzt/node_modules",
    "/Users/thzt/projj/github.com/node_modules",
    "/Users/thzt/projj/node_modules",
    "/Users/thzt/node_modules",
    "/Users/node_modules",
    "/node_modules",
    "/Users/thzt/projj/github.com/thzt/debug-webpack/node_modules/xyz",
    "/Users/thzt/projj/github.com/thzt/debug-webpack/node_modules/xyz.wasm",
    "/Users/thzt/projj/github.com/thzt/debug-webpack/node_modules/xyz.mjs",
    "/Users/thzt/projj/github.com/thzt/debug-webpack/node_modules/xyz.js",
    "/Users/thzt/projj/github.com/thzt/debug-webpack/node_modules/xyz.json"
]

（5）error.message

"Can't resolve 'xyz' in '/Users/thzt/projj/github.com/thzt/debug-webpack/src'"

5. 总结

我们通过compiler.resolverFactory找到了针对于不同类型模块的 resolver，
分为三种normal，context和loader。

然后使用特定 resolver 的 noResolve hook，拦截到了错误对象。
其中，request.context.issuer表示当前被查找模块的父模块的文件路径，
request.request，表示了当前被查找的模块名，
而error.missing，展示了模块的查找顺序。

compiler.resolverFactory.hooks.resolver.for('normal').tap('my', resolver => {
  resolver.hooks.noResolve.tap('MyPlugin', (request, error) => {
    request.context.issuer  // 父模块
    request.request         // 当前被查找的模块

    error.missing           // 当前模块的查找顺序
  });
});

参考

webpack: Resolvers
webpack: require.context
tapable: HookMap
github: enhanced-resolve
github: webpack