同一动态部署域名下Webpack Module Federation远程URL配置最佳实践

当远程应用与消费应用部署在同一动态变更域名下时，以下几种配置方式是业内常用的最佳实践：

1. 直接使用相对路径（最简洁方案） #

既然两者同域名，完全不需要写死绝对URL，直接用相对路径指向remoteEntry.js即可。这种方式自动适配当前域名，不管是domain.100.com还是domain.101.com，都能正确加载远程资源。

修改后的配置示例：

{
  remotes: {
    // 去掉绝对域名，仅保留路径
    app1: 'app1@/remoteEntry.js',
  },
  remoteType:'script',
  filename: "remoteEntry.js",
  shared: {
    react: {
      eager: true,
      singleton: true,
      requiredVersion: deps["react"],
    },
    "react-dom": {
      eager: true,
      singleton: true,
      requiredVersion: deps["react-dom"],
    },
  }
}

注意：如果远程应用的remoteEntry.js不在根目录，只需要调整相对路径即可，比如app1@/apps/app1/remoteEntry.js。

2. 基于环境变量动态生成URL（多环境适配） #

如果不同部署环境下，远程资源的路径前缀不同（比如开发环境是/dev/app1/，生产环境是/prod/app1/），可以用webpack的环境变量来动态拼接URL。

步骤如下：

• 在项目根目录创建不同环境的.env文件，比如.env.development和.env.production：

  # .env.development
  REMOTE_APP1_PATH=/dev/app1/
  

  # .env.production
  REMOTE_APP1_PATH=/prod/app1/
  

• 在webpack配置中读取环境变量：

{
  remotes: {
    app1: `app1@${process.env.REMOTE_APP1_PATH}remoteEntry.js`,
  },
  // 其余配置不变...
}

这种方式能让你在不同环境下复用同一份webpack配置，只需切换环境变量即可。

3. 运行时动态配置（复杂场景适配） #

如果需要在运行时根据当前域名或其他条件动态调整远程URL（比如域名规则不固定，需要通过前端逻辑判断），可以使用Module Federation的运行时API手动加载远程模块。

示例代码（消费应用入口文件）：

// 动态加载远程应用
async function initRemoteApp() {
  // 基于当前域名拼接远程资源地址
  const remoteEntryUrl = `${window.location.origin}/remoteEntry.js`;
  
  // 初始化webpack共享作用域
  await __webpack_init_sharing__('default');
  
  // 加载remoteEntry.js（webpackIgnore: true 让webpack不解析这个路径）
  const container = await import(/* webpackIgnore: true */ remoteEntryUrl);
  
  // 初始化远程容器
  await container.init(__webpack_share_scopes__.default);
  
  // 按需导入远程模块
  const { default: App1Component } = await container.get('./App');
  // 渲染组件...
}

// 启动时执行
initRemoteApp();

这种方式灵活性最高，适合需要根据用户场景、域名规则动态调整的复杂项目。

方案选择建议 #

• 简单同域名场景：优先用相对路径，配置最少，维护成本最低；
• 多环境路径差异：用环境变量，兼顾灵活性和可维护性；
• 运行时动态调整：用运行时API，满足复杂业务场景需求。

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