如何为Webpack模块联邦的暴露组件应用resolveExtensions配置

开发者阿泽

2026-7-3

解决Module Federation暴露组件不继承resolveExtensions的问题

问题原因

Webpack的resolveExtensions是全局解析配置，但Module Federation的exposes字段中如果指定了带后缀的文件路径，Webpack会直接使用该路径，不会触发resolveExtensions的自动匹配；另外如果你的resolveExtensions没有正确挂载到Webpack主配置的resolve.extensions字段下，也会导致暴露组件内部的导入无法生效。

解决方案

方案1：在exposes中使用无后缀路径

将exposes里的文件路径去掉后缀，让Webpack通过resolveExtensions自动匹配对应文件：

moduleFederationOpts: {
  name: 'MyApp',
  filename: 'js/my-app-entry.js',
  exposes: {
      './myapp': './src/app',
      './myAppBlock': './src/modules/blocks/myBlock',
  },
},

这样Webpack会按照你配置的['.js', '.ts', '.json', '.jsx', '.scss']顺序，依次查找app.js、app.ts等文件，匹配第一个存在的文件。

方案2：确保resolveExtensions正确映射到Webpack主配置

检查你的Webpack最终配置是否将commonOpts.resolveExtensions正确赋值到resolve.extensions字段，比如：

// 最终Webpack配置文件
const commonOpts = {
  // ...你的配置
  resolveExtensions: ['.js', '.ts', '.json', '.jsx', '.scss'],
  // ...其他配置
};

module.exports = {
  // ...其他配置
  resolve: {
    extensions: commonOpts.resolveExtensions // 确保这里正确映射
  },
  plugins: [
    new ModuleFederationPlugin(commonOpts.moduleFederationOpts)
  ]
};

这样暴露组件内部的所有导入语句，都会遵循resolveExtensions的规则自动补全后缀。