resolveId

2025年01月22日

柏拉文

越努力，越幸运

一、认识

---

resolveId Hooks: 解析模块 ID。当构建工具在处理模块时，会调用该钩子来解析模块路径。你可以在此钩子中处理模块路径的解析，例如将某些特定的模块 ID 映射到其他文件。 resolveId Hooks 在 Webpack 的实现逻辑为: 在解析配置 compiler.options.resolve.plugins 中插入一个虚拟模块解析插件, 这个虚拟模块解析插件在 resolve Hook(resolver.getHook("resolve")) 阶段, 判断模块解析请求是否符合虚拟模块规则, 比如 virtual:bolawen.css, 如果符合, 那么, 将这个虚拟模块转换为绝对路径, 并基于 finalInputFileSystem._writeVirtualFile 写入到虚拟空间。通过 resolver.doResolve 重定向虚拟模块解析请求为转换后的绝对路径。

二、语法

---

const unplugin = require('unplugin');

const plugin = unplugin.createUnplugin((options = {}) => {
  return {
    name: 'my-plugin',

    resolveId(id) {
        if (id === 'virtual:/foo') {
            return 'virtual:/foo.js'; // 映射虚拟模块的 ID
        }
        return null;
    };
  }
});

• id：请求的模块 ID。