close
Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

moduleFederation.options

Used to configure the Rspack's Module Federation plugin (Module Federation v1.5).

TIP

There are several versions of Module Federation implementations. Before using moduleFederation.options, please read the Module Federation guide to understand the differences between different versions and how to make choices.

Introduction

When using Module Federation, it is recommended that you use the moduleFederation.options option provided by Rsbuild. This option will automatically adjust some related configurations to ensure that the module federation application can run correctly.

When you set the moduleFederation.options option, Rsbuild will take the following actions:

  • Automatically register the ModuleFederationPlugin plugin, and pass the value of options to the plugin.
  • Set the default value of the provider's dev.assetPrefix configuration to true. This will ensure that the static asset URL is correct for remote modules.
  • Set the default value of Rspack's output.uniqueName configuration to moduleFederation.options.name, this allows HMR to work as expected.
  • Turn off the split-by-experience rules in Rsbuild's performance.chunkSplit as it may conflict with shared modules, refer to #3161.
  • Turn off the splitChunks rule of remote entry.

Usage

The type of moduleFederation.options is exactly the same as the ModuleFederationPlugin plugin of Rspack:

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

Please refer to the ModuleFederationPlugin document for all available options.

Example

Here is a minimal example:

  • 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',
      },
    },
  },
});

For more examples, please see: