webpack-plugin-mf

Webpack preset for Module Federation (micro-frontend) — 基于 webpack 5 内置 ModuleFederationPlugin，零配置启用微前端架构。

安装

npm i webpack-plugin-mf -D

使用

Host 应用（消费远端模块）

// webpack.config.ts
import { defineConfig } from 'webpack-common'
import react from 'webpack-plugin-react'
import mf from 'webpack-plugin-mf'

export default defineConfig({
  presets: [
    react(),
    mf({
      name: 'host',
      role: 'host',
      remotes: [
        { name: 'app1', entry: 'http://localhost:3001/remoteEntry.js' },
      ],
      shared: {
        react: { singleton: true, requiredVersion: '^19.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^19.0.0' },
      },
    }),
  ],
})

Remote 应用（暴露模块）

// webpack.config.ts
import { defineConfig } from 'webpack-common'
import react from 'webpack-plugin-react'
import mf from 'webpack-plugin-mf'

export default defineConfig({
  presets: [
    react(),
    mf({
      name: 'app1',
      role: 'remote',
      filename: 'remoteEntry.js',
      exposes: [
        { path: './Button', module: './src/components/Button' },
        { path: './utils', module: './src/utils/index' },
      ],
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
})

配置项

| 选项 | 类型 | 默认值 | 说明 | |------|------|--------|------| | name | string | 必填 | 应用名称（全局唯一） | | role | 'host' \| 'remote' \| 'both' | 'both' | 应用角色 | | filename | string | 'remoteEntry.js' | Remote 入口文件名 | | remotes | RemoteEntry[] | [] | 远端应用列表（host 端填写） | | exposes | ExposeEntry[] | [] | 暴露的模块列表（remote 端填写） | | shared | object | {} | 共享模块配置 |

说明

• 使用 webpack 5 内置 ModuleFederationPlugin（无额外依赖）
• 自动设置 output.publicPath: 'auto'，确保 remote 资源 URL 正确
• 支持 host、remote、双角色（both）三种模式

许可证

MIT