close
  • English

      • 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.

      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: