如何配置Webpack alias实现导入优先匹配，不存在则回退原依赖

直接通过Webpack拦截+动态代理模块即可实现需求，全程不需要修改任何业务代码，核心逻辑是将所有@library-a的导入请求转发到一层动态生成的代理层，在代理层做导出优先级合并。

方案一：自定义虚拟插件（无临时文件，最干净） #

核心逻辑是在Webpack编译阶段动态生成代理模块，不需要本地生成实体文件，配置如下：

// webpack.config.js
const path = require('path');
const { NormalModuleReplacementPlugin } = require('webpack');
const { RawSource } = require('webpack-sources');

// 构建时读取两个依赖的导出信息
const libBExports = require('@library-b');
const hasDefaultB = !!libBExports.default;
const coveredNamedExports = Object.keys(libBExports).filter(key => key !== 'default');

// 动态生成代理模块源码：优先导出B的内容，其余全量从A补全
const proxySource = `
export * from '@library-a';
${coveredNamedExports.map(expName => `export { ${expName} } from '@library-b';`).join('\n')}
export { default } from '${hasDefaultB ? '@library-b' : '@library-a'}';
`;

// 虚拟模块注册插件
class LibProxyPlugin {
  apply(compiler) {
    const proxyModulePath = path.resolve(__dirname, '__virtual__/lib-a-proxy.js');
    // 拦截代理模块的解析请求
    compiler.resolverFactory.hooks.resolver.for('normal').tap('LibProxyPlugin', resolver => {
      resolver.hooks.resolve.tapAsync('LibProxyPlugin', (request, context, callback) => {
        if (request.request === '@library-a-proxy') {
          return callback(null, {
            path: proxyModulePath,
            request: undefined,
            query: request.query,
            module: false,
            _isVirtualProxy: true
          });
        }
        callback();
      });
    });
    // 给虚拟模块注入源码
    compiler.hooks.compilation.tap('LibProxyPlugin', compilation => {
      compilation.hooks.buildModule.tap('LibProxyPlugin', module => {
        if (module._isVirtualProxy) {
          module._source = new RawSource(proxySource);
        }
      });
    });
  }
}

module.exports = {
  // 其余原有Webpack配置保持不变
  plugins: [
    // 将所有对@library-a的导入重定向到虚拟代理模块
    new NormalModuleReplacementPlugin(/^@library-a$/, '@library-a-proxy'),
    new LibProxyPlugin()
  ]
}

方案二：预生成代理文件（无自定义插件，上手最简单） #

如果不想写Webpack插件，可以在构建前预先生成实体代理文件，再通过alias重定向即可：

1. 新建代理生成脚本gen-lib-proxy.cjs

// gen-lib-proxy.cjs
const fs = require('fs');
const path = require('path');
const libBExports = require('@library-b');
const hasDefaultB = !!libBExports.default;
const coveredNamedExports = Object.keys(libBExports).filter(key => key !== 'default');

const proxyContent = `
export * from '@library-a';
${coveredNamedExports.map(expName => `export { ${expName} } from '@library-b';`).join('\n')}
export { default } from '${hasDefaultB ? '@library-b' : '@library-a'}';
`;

// 生成到项目临时目录，记得把temp目录加入.gitignore
const tempDir = path.resolve(__dirname, './temp');
if (!fs.existsSync(tempDir)) fs.mkdirSync(tempDir);
fs.writeFileSync(path.resolve(tempDir, 'lib-a-proxy.js'), proxyContent);

2. 在package.json中给构建命令加前置执行步骤

{
  "scripts": {
    "prebuild": "node gen-lib-proxy.cjs",
    "build": "webpack"
  }
}

3. 修改Webpack配置添加alias规则

// webpack.config.js
const path = require('path');
module.exports = {
  // 其余原有配置保持不变
  resolve: {
    alias: {
      '@library-a': path.resolve(__dirname, './temp/lib-a-proxy.js')
    }
  }
}

注意事项 #

不要直接配置resolve.alias: { '@library-a': '@library-b' }，这种写法会完全替换导入源，只要@library-b中不存在对应导出就会直接抛编译错误，无法实现自动回退逻辑。

• 上述方案完全兼容原有业务代码的导入写法，包括具名导入、默认导入
• 如果业务中存在import Xxx from '@library-a/xxx'这类子路径导入，只要调整重定向规则的匹配正则，对应生成每个子路径的代理模块即可，核心逻辑一致
• 如果两个库使用TypeScript开发，只要保证@library-b的类型定义是@library-a的子类型，不会出现类型提示冲突。

内容的提问来源于stack exchange，提问作者Jake Lam