如何基于环境（测试/QA/开发）动态配置Module Federation远程URL？

方法1：构建时通过环境变量替换 #

直接在webpack配置中读取环境变量，替换硬编码的远程URL，不同环境通过.env文件或构建命令传入变量：

步骤1：修改webpack配置 #

// 读取环境变量，默认 fallback 到开发环境地址
const vehicleRemoteUrl = process.env.REACT_APP_VEHICLE_REMOTE_URL || "https://vehicle-mf-dev.com/remoteEntry.js";

const devConfig = {
  mode: "development",
  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {
        // 用环境变量拼接 remote 配置
        vehicle: `vehicle@${vehicleRemoteUrl}`,
      },
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ],
};

步骤2：配置不同环境的.env文件 #

在项目根目录创建对应环境的配置文件：

• 开发环境（.env.development）：

  REACT_APP_VEHICLE_REMOTE_URL=https://vehicle-mf-dev.com/remoteEntry.js
  

• 测试环境（.env.test）：

  REACT_APP_VEHICLE_REMOTE_URL=https://vehicle-mf-test.com/remoteEntry.js
  

• QA环境（.env.qa）：

  REACT_APP_VEHICLE_REMOTE_URL=https://vehicle-mf-qa.com/remoteEntry.js
  

步骤3：构建时指定环境 #

根据你的构建工具，运行对应命令加载环境配置，比如Create React App可以用：

# 构建测试环境
REACT_APP_ENV=test npm run build

# 构建QA环境
REACT_APP_ENV=qa npm run build

如果用webpack直接构建，需要配合dotenv-webpack插件加载对应.env文件。

方法2：运行时动态配置（无需重新构建） #

如果需要同一个构建包适配多环境，不用重新编译，可以在应用运行时动态加载远程模块：

步骤1：修改Module Federation配置 #

先清空remotes配置，留待运行时动态注册：

const devConfig = {
  mode: "development",
  devServer: {
    port: 3000,
    historyApiFallback: true,
  },

  plugins: [
    new ModuleFederationPlugin({
      name: "container",
      filename: "remoteEntry.js",
      remotes: {}, // 运行时动态添加
      exposes: {},
      shared: {
        ...deps,
        react: {
          singleton: true,
          requiredVersion: deps.react,
        },
        "react-dom": {
          singleton: true,
          requiredVersion: deps["react-dom"],
        },
      },
    }),
  ],
};

步骤2：在应用入口动态加载远程模块 #

在src/index.js（或应用入口文件）中，根据环境变量动态加载并注册远程容器：

// 从环境变量获取远程URL，默认用开发环境地址
const vehicleRemoteUrl = process.env.REACT_APP_VEHICLE_REMOTE_URL || "https://vehicle-mf-dev.com/remoteEntry.js";

async function initRemoteModule() {
  // 加载远程入口文件，webpackIgnore: true 避免webpack提前解析这个URL
  const remoteContainer = await import(/* webpackIgnore: true */ vehicleRemoteUrl);
  
  // 初始化模块联邦共享作用域
  await window.__webpack_init_sharing__("default");
  await remoteContainer.init(window.__webpack_share_scopes__.default);

  // 之后即可正常导入远程模块
  const { default: VehicleApp } = await import("vehicle/App");
  // 这里写你的渲染逻辑，比如把VehicleApp挂载到DOM
}

// 初始化远程模块
initRemoteModule();

这种方式部署时，只需要修改环境变量就能切换不同环境的远程地址，无需重新构建。

注意事项 #

• 如果不用Create React App/Vite这类自带环境变量支持的工具，需要安装dotenv-webpack插件来加载.env文件。
• 运行时动态加载要加上/* webpackIgnore: true */注释，防止webpack把远程URL当作静态资源处理。

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