如何为Webpack跨文件夹非相对路径引用配置不同resolve.modules

我明白你遇到的痛点——多个目录用非相对路径引用模块，同名文件导致解析冲突，又不想重复造轮子重写整个解析逻辑。其实不用从头写复杂的resolve插件，Webpack的 resolver 钩子机制可以帮你轻量实现需求，复用它原生的解析能力。

方案一：针对单个同名模块的快速解决（适合少量冲突场景） #

如果冲突的模块数量不多，直接用resolve.alias的函数形式，根据发起引用的文件上下文返回对应的模块路径：

const path = require('path');

module.exports = {
  resolve: {
    alias: {
      // 以同名的`utils`模块为例
      'utils$': (resolveData) => {
        // 判断当前引用的文件是否在folderA目录下
        const isInFolderA = resolveData.context.startsWith(
          path.resolve(__dirname, 'src/folderA')
        );
        // 根据上下文返回对应的模块路径
        return isInFolderA
          ? path.resolve(__dirname, 'src/folderA/utils.js')
          : path.resolve(__dirname, 'src/folderB/utils.js');
      }
    },
    modules: ['node_modules']
  }
};

这种方式简单直接，不需要写插件，但只适合单个或少数几个同名模块的场景。

方案二：通用的目录级解析规则（适合大量模块或复杂目录结构） #

如果需要给整个目录设置专属的modules解析数组，我们可以写一个轻量的resolve插件，只修改解析时的modules参数，完全复用Webpack原生的解析逻辑，不会重复造轮子：

第一步：实现ContextBasedModulesPlugin插件 #

const path = require('path');

class ContextBasedModulesPlugin {
  constructor({ contexts }) {
    // 配置：键是目录前缀，值是对应的modules数组
    this.contextModuleMap = Object.entries(contexts).map(([prefix, modules]) => ({
      prefix: path.resolve(__dirname, prefix),
      modules: modules.map(m => path.resolve(__dirname, m))
    }));
  }

  apply(resolver) {
    // 绑定到resolve钩子，在解析开始前修改modules配置
    resolver.getHook('resolve').tapAsync(
      'ContextBasedModulesPlugin',
      (request, resolveContext, callback) => {
        // 找到当前引用文件所在目录匹配的配置
        const matchedConfig = this.contextModuleMap.find(({ prefix }) => 
          request.context.startsWith(prefix)
        );

        if (matchedConfig) {
          // 构造新的请求，将自定义modules放在默认modules前面（优先查找）
          const modifiedRequest = {
            ...request,
            modules: [...matchedConfig.modules, ...request.modules]
          };
          // 用修改后的请求继续执行原生解析流程
          return resolver.doResolve(
            resolver.ensureHook('resolve'),
            modifiedRequest,
            `Using custom modules for directory: ${matchedConfig.prefix}`,
            resolveContext,
            callback
          );
        }

        // 没有匹配的目录，直接走原生解析流程
        callback();
      }
    );
  }
}

第二步：在Webpack配置中启用插件 #

module.exports = {
  resolve: {
    // 默认的modules数组（比如node_modules）
    modules: ['node_modules'],
    plugins: [
      new ContextBasedModulesPlugin({
        contexts: {
          // folderA下的文件解析模块时，优先查找folderA目录
          'src/folderA': ['src/folderA'],
          // folderB下的文件解析模块时，优先查找folderB目录
          'src/folderB': ['src/folderB']
        }
      })
    ]
  }
};

这个插件的核心逻辑是：在Webpack开始解析模块前，检查发起引用的文件所在目录，匹配到对应的配置后，修改解析请求的modules数组，把当前目录加到最前面（保证优先查找），然后继续用Webpack原生的解析逻辑处理，完全避免了重复实现解析功能。

为什么这个方案可行？ #

Webpack的解析流程是基于enhanced-resolve库实现的，它允许通过钩子在解析的不同阶段修改请求参数。我们的插件只在最开始的resolve钩子中调整modules数组，后续的解析逻辑（比如文件查找、扩展名匹配、别名处理等）都复用Webpack原生的实现，既解决了你的问题，又不会引入额外的维护成本。

内容的提问来源于stack exchange，提问作者Stav Alfi