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

Webpack Plugin

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

快速开始

安装

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

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

创建 module-federation.config.js

创建 module-federation.config.js 文件，内容如下：

module-federation.config.js
module.export = {
  name: 'host',
  remotes: {
    provider: 'provider@http://localhost:2004/mf-manifest.json',
  },
  exposes: {
    './Button': './src/components/Button.tsx',
  },
  shared: {
    react: {
      singleton: true,
    },
    'react-dom': {
      singleton: true,
    },
  },
};

注册插件

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

webpack.config.js
const {
  ModuleFederationPlugin,
} = require('@module-federation/enhanced/webpack');
const mfConfig = require('./module-federation.config');

module.exports = {
  devServer: {
    port: 2000,
  },
  output: {
    publicPath: 'http://localhost:2000/',
  },
  plugins: [new ModuleFederationPlugin(mfConfig)],
};

配置

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