使用Module Federation Plugin实现的微前端能否分属不同仓库？

当然可以，而且这正是Module Federation设计的核心目标之一——支持独立仓库、独立团队、独立构建部署的微前端架构，完全匹配你避免代码冲突、拆分功能模块的需求。

具体实现方式 #

• 子应用独立配置
  每个子应用作为单独的Git仓库维护，在各自的Webpack配置中添加ModuleFederationPlugin，指定暴露的组件/模块，同时设置部署后的访问地址：

  const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
  
  module.exports = {
    output: {
      publicPath: 'https://subapp1.your-domain.com/' // 子应用部署后的公开地址
    },
    plugins: [
      new ModuleFederationPlugin({
        name: 'SubApp1',
        filename: 'remoteEntry.js',
        exposes: {
          './UserModule': './src/modules/User' // 对外暴露的功能模块
        },
        shared: { 
          react: { singleton: true }, 
          'react-dom': { singleton: true } 
        } // 共享公共依赖，避免重复打包
      })
    ]
  };
  

  配置完成后，子应用独立构建、部署到自己的服务器或CDN即可。

• 宿主应用关联子应用
  宿主应用同样通过ModuleFederationPlugin的remotes字段，引入不同仓库子应用的remoteEntry.js地址：

  new ModuleFederationPlugin({
    name: 'HostApp',
    remotes: {
      SubApp1: 'SubApp1@https://subapp1.your-domain.com/remoteEntry.js',
      SubApp2: 'SubApp2@https://subapp2.your-domain.com/remoteEntry.js' // 来自另一个独立仓库的子应用
    },
    shared: { 
      react: { singleton: true }, 
      'react-dom': { singleton: true } 
    }
  });
  

• 在宿主中使用子应用组件
  通过React的懒加载机制引入子应用模块：

  const UserModule = React.lazy(() => import('SubApp1/UserModule'));
  
  function HostLayout() {
    return (
      <div className="host-container">
        <header>宿主应用头部</header>
        <React.Suspense fallback={<div>模块加载中...</div>}>
          <UserModule />
        </React.Suspense>
      </div>
    );
  }
  

关键注意事项 #

• 每个子应用的remoteEntry.js地址必须对外可访问，宿主才能拉取到对应的模块。
• 共享依赖（如React、ReactDOM）要设置singleton: true，避免页面中出现多实例导致的兼容性问题。
• 不同团队完全独立维护各自的子应用仓库，构建部署互不干扰，从根源上避免代码冲突。

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