Umi使用webpack5 Module Federation

Umi 可以使用 webpack5 的 Module Federation 插件来实现模块联邦。

首先，你需要确保你的 Umi 版本大于或等于 3.4.0。

然后，你需要在你的 Umi 项目中安装 webpack5 和 @umijs/plugin-mf 插件：

npm install webpack@latest @umijs/plugin-mf@latest 

接下来，在你的 Umi 配置文件（.umirc.ts 或 config/config.ts）中添加插件配置：

export default { plugins: [ ['@umijs/plugin-mf'], ], } 

在你的入口文件中，你可以使用 __webpack_init_sharing__ 和 __webpack_share_scopes__ 全局变量来配置模块联邦：

import { loadMicroApp } from 'qiankun'; // 定义共享范围 const shareScope = 'umi'; // 初始化模块联邦 if (window.__POWERED_BY_QIANKUN__) { __webpack_init_sharing__('umi') .then(() => import(/* webpackIgnore: true */ 'umi')) .then((umi) => { // 注册共享模块 umi.registerMicroApps([ { name: 'app1', entry: '//localhost:8001', container: '#container', activeRule: '/app1', }, ]); // 启动应用 umi.start(); }); } else { // 启动普通应用 loadMicroApp({ name: 'app1', entry: '//localhost:8001', container: '#container', activeRule: '/app1', props: {}, }); } 

这样，你就可以在 Umi 中使用 webpack5 的 Module Federation 插件来实现模块联邦了。