close
指南
配置
插件
API
社区
指南
配置
插件
API
社区
简体中文

moduleFederation.options

用于配置 Rspack 模块联邦插件（对应模块联邦 v1.5）。

TIP

模块联邦的实现有多个版本。在使用 moduleFederation.options 之前，请阅读 模块联邦指南 来了解不同版本之间的差异，以及如何进行选择，

介绍

在使用模块联邦时，我们推荐你使用 Rsbuild 提供的 moduleFederation.options 选项，这个选项会自动调整一些相关的配置，以保证模块联邦应用可以正确运行。

当你设置 moduleFederation.options 选项后，Rsbuild 会执行以下操作：

  • 自动注册 ModuleFederationPlugin 插件，并将 options 的值透传给插件。
  • 将 provider 的 dev.assetPrefix 配置的默认值设置为 true，这可以确保 remote modules 的静态资源 URL 是正确的。
  • 将 Rspack output.uniqueName 配置的默认值设置为 moduleFederation.options.name，使 HMR 可以正常工作。
  • 关闭 Rsbuild performance.chunkSplit 中 split-by-experience 相关的规则，因为这可能会与 shared modules 冲突，参考 #3161。
  • 关闭 remote entry 的 splitChunks 规则。

用法

moduleFederation.options 的类型与 Rspack 的 ModuleFederationPlugin 插件完全一致：

rsbuild.config.ts
export default defineConfig({
  moduleFederation: {
    options: {
      name: 'remote',
      // other options
    },
  },
});

请参考 ModuleFederationPlugin 文档来了解所有可用的选项。

示例

下面是一个最小示例：

  • Remote App
remote/rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  server: {
    port: 3002,
  },
  moduleFederation: {
    options: {
      name: 'remote',
      exposes: {
        './Button': './src/Button',
      },
      filename: 'remoteEntry.js',
    },
  },
});
  • Host App
host/rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';

export default defineConfig({
  server: {
    port: 3002,
  },
  moduleFederation: {
    options: {
      name: 'host',
      remotes: {
        remote: 'remote@http://localhost:3002/remoteEntry.js',
      },
    },
  },
});

更多示例请查看：