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 プラグインを利用してモジュールフェデレーションを実現することができます。