Webpack@3.12.0编译时动态解析别名的实现问题求助

问题回顾 #

你需要在Webpack 3.12.0里实现：根据导入package-a的第三方包不同，把package-a/file-b这类导入动态指向对应版本的私有包（旧版本不在node_modules，存放在自定义目录），但你写的插件没生效，请求还是走到了node_modules里的默认版本。

为啥你的代码没生效？ #

Webpack 3的resolver钩子执行是有顺序的，你用的module钩子触发时机偏晚，默认的node_modules解析逻辑已经先一步处理了请求，所以你的自定义替换根本没机会生效。另外，你直接给request加了resolved: true，这个标记的用法不对，没能正确终止默认解析链。

正确的解决方案 #

我们要在更早的解析阶段拦截请求，还要根据导入来源判断版本，同时彻底跳过默认解析逻辑。下面是完整的配置示例：

假设你的目录结构

你的项目根目录/
├── versions/
│   ├── v2.2.0/  # 第三方包A要用的版本
│   │   ├── file-b.js
│   │   └── 其他文件
│   └── v1.0.0/  # 第三方包B要用的版本
│       ├── file-b.js
│       └── 其他文件
├── node_modules/
│   ├── package-a/  # 默认版本
│   ├── third-party-package-A/  # 需要用v2.2.0的package-a
│   └── third-party-package-B/  # 需要用v1.0.0的package-a
└── webpack.config.js

修改后的Webpack解析插件

config.resolve.plugins = [{
  apply(resolver) {
    // 用resolve钩子，比module钩子早触发，能抢在默认解析前拦截
    resolver.plugin('resolve', function(request, callback) {
      // 只处理以package-a/开头的请求
      if (!request.request || !request.request.startsWith('package-a/')) {
        return callback();
      }

      // 根据导入来源的路径判断用哪个版本
      let targetVersion = 'v2.2.0'; // 默认fallback版本
      const importerPath = request.context;

      // 举个例子：如果导入来自third-party-package-B，就用v1.0.0
      if (importerPath.includes('third-party-package-B')) {
        targetVersion = 'v1.0.0';
      }

      // 把package-a前缀替换成对应版本的绝对路径
      const newRequest = request.request.replace(
        /^package-a/,
        `${__dirname}/versions/${targetVersion}`
      );

      // 告诉Webpack用新路径解析，并且跳过后续默认逻辑
      this.doResolve(
        'file',
        { ...request, request: newRequest, skipExisting: true },
        `Redirecting package-a to ${targetVersion} for ${importerPath}`,
        callback
      );
    });
  }
}];

几个关键细节 #

• 选对钩子时机：resolve钩子是在Webpack开始查找模块前触发的，能确保我们的自定义逻辑先执行。
• 根据导入来源判断版本：request.context是导入当前模块的文件路径，通过这个路径里的第三方包名称，就能区分要映射的版本，不管有多少个第三方包都能灵活扩展。
• 跳过默认解析：skipExisting: true这个参数很重要，它会告诉Webpack不要再去默认的node_modules里找这个模块了，直接用我们给的新路径。
• 路径要绝对：用__dirname拼接成绝对路径，避免Webpack解析出错。

怎么验证是否生效？ #

可以在Webpack的resolve配置里开debug模式，看解析日志：

config.resolve = {
  // 你的其他resolve配置
  debug: true
};

运行构建后，看日志里关于package-a的解析记录，确认是不是指向了versions目录下的对应版本，而不是node_modules里的默认包。

内容的提问来源于stack exchange，提问作者Hiroki Osame