Rspack Plugin

注意

需要 Rspack 0.5.0 及以上版本。

能够构建出满足 Module Federation 加载规范的模块
能够使用别名消费 Module Federation 规范的模块
能够设置模块的共享依赖配置，当加载模块的宿主环境已经存在对应依赖时将不会重复加载
当模块具备远程类型时将会自动把远程模块的类型下载下来消费
消费远程模块时将具备热更新能力

快速开始

安装

你可以通过如下的命令安装插件：

npm

yarn

pnpm

bun

npm add @module-federation/enhanced
npm add @module-federation/rsbuild-plugin --save-dev

注册插件

Rsbuild

在 Rsbuild 中，你可以通过 rsbuild.config.ts 配置文件来添加插件：

rsbuild.config.js

import { defineConfig } from '@rsbuild/core';
import { pluginModuleFederation } from '@module-federation/rsbuild-plugin';

export default defineConfig({
  output: {
    // 这将影响生产环境中使用的产物路径前缀
    assetPrefix: 'https://cdn.domain.com/path/to/project/',
  },
  server: {
    port: 2000,
  },
  plugins: [
    pluginModuleFederation({
      name: 'federation_provider',
      exposes: {
        './button': './src/button.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
});

Rspack

在 Rspack 中，你可以通过 rspack.config.js 配置文件来添加插件：

rspack.config.js

const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');

module.exports = {
  devServer: {
    port: 2000,
  },
  output: {
    // 需要设置一个唯一值，不能和其他应用相等
    uniqueName: 'federation_provider',
    // 使用 manifest 必须要配置 publicPath
    publicPath: 'http://localhost:2000/',
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'federation_provider',
      exposes: {
        './button': './src/button.tsx',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};

配置构建插件

Type: ModuleFederationPlugin(options: ModuleFederationOptions)
Module federation 插件的配置结构如下所示：

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

你可以在 Config 总览页面找到所有配置项的详细说明。

ON THIS PAGE

Rspack Plugin#

快速开始#

安装#

注册插件#

Rsbuild#

Rspack#