Guide
Practice
Configuration
Plugins
Showcase
Blog
Guide
Practice
Configuration
Plugins
Showcase
Blog

Rspack Plugin

Note

Requires Rspack version 0.5.0 or above

  • Capable of building modules that meet the Module Federation loading specifications.
  • Can consume modules that adhere to the Module Federation specifications using aliases.
  • Can set shared dependency configurations for modules, so that when the host environment of the loaded module already has the corresponding dependency, it will not be loaded again.
  • When a module has remote types, it will automatically download and consume the types of the remote modules.
  • Consuming remote modules will have hot update capabilities.

Quick Start

Installation

You can install the plugin with the following commands:

npm
yarn
pnpm
bun
npm add @module-federation/enhanced --save

Register the Plugin

In Rspack, you can add the plugin through the plugins configuration item in the rspack.config.js file:

rspack.config.js
import { defineConfig } from '@rsbuild/core';
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';

export default defineConfig({
  // publicPath must be configured if using manifest
  dev: {
    assetPrefix: 'http://localhost:2000/',
  },
  output: {
    // This will affect the build output resource url prefix in production env
    assetPrefix: 'https://cdn.domain.com/path/to/project/',
  },
  server: {
    port: 2000,
  },
  tools: {
    rspack: (config, { appendPlugins }) => {
      // You need to set a unique value that is not equal to other applications
      config.output!.uniqueName = 'federation_provider';
      appendPlugins([
        new ModuleFederationPlugin({
          name: 'federation_provider',
          exposes: {
            './button': './src/button.tsx',
          },
          shared: ['react', 'react-dom'],
        }),
      ]);
    },
  },
});

Configure the Build Plugin

  • Type: ModuleFederationPlugin(options: ModuleFederationOptions)

  • The configuration structure for the Module Federation plugin is as follows:

type ModuleFederationOptions = {
  name: string;
  filename?: string;
  remotes?: Array<RemoteInfo>;
  shared?: ShareInfos;
};

You can find detailed explanations of all configuration items on the Configuration Overview page.