指南
实践
配置
插件
案例
博客
指南
实践
配置
插件
案例
博客
简体中文

Webpack Plugin

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

快速开始

安装

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

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

注册插件

在 Webpack 中，你可以通过 webpack.config.js 配置文件中的 plugins 配置项来添加插件：

公共路径自动配置与 Manifest

当使用 mf-manifest.json 远程模块时，publicPath: 'auto' 的支持还处于实验阶段

webpack.config.js
import { ModuleFederationPlugin } from '@module-federation/enhanced/webpack';
module.exports = {
  devServer: {
    port: 2000,
  },
  output: {
    // 使用 manifest 必须要配置 publicPath
    publicPath: 'http://localhost:2000/', //or 'auto'
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'rspack_provider',
      filename: 'remoteEntry.js',
      exposes: {
        // 设置需要导出的模块，default 导出为 .
        './button': './src/components/button',
      },
      shared: {
        react: {
          singleton: true,
        },
        'react-dom': {
          singleton: true,
        },
      },
    }),
  ],
};

配置构建插件

  • Type: ModuleFederationPlugin(options: ModuleFederationOptions)

  • Module federation 插件的配置结构如下所示：

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

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