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

moduleFederation.options

  • 类型： ModuleFederationConfig
  • 默认值： undefined
  • 版本： >= 0.4.0

用于配置 Rspack 模块联邦插件。

TIP

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

介绍

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

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

  • 自动注册 ModuleFederationPlugin 插件，并将 options 的值透传给插件。
  • 将 Rspack output.publicPath 配置的默认值设置为 'auto'。
  • 关闭 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',
      },
    },
  },
});

更多示例请查看：