UMI webpack5 Module Federation 使用

UMI webpack5 Module Federation 使用

安装依赖

yarn add webpack webpack-cli 

参考版本

"@umijs/max": "4.1.10",
"webpack": "^5.94.0",
"webpack-cli": "^5.1.4"

项目A

const { ModuleFederationPlugin } = require("webpack").container;
export default defineConfig({
  // 其他umi配置...
  chainWebpack(memo) {
        memo.plugin('mf').use(ModuleFederationPlugin, [
            {
                name: 'mf1',
                library: { type: 'umd', name: 'mf1' },
                filename: 'remoteEntry.js',
                exposes: {
                    './Button': './src/test/Button',
                },
            },
        ]);
    },
});

项目B

const { ModuleFederationPlugin } = require("webpack").container;
export default defineConfig({
  // 其他umi配置...
     mf: {
        name: 'modules',
        remotes: [
            {
                name: 'mf1',
                entries: {
                    DEV: 'http://localhost:8001/remoteEntry.js',
                },
                keyResolver: `(()=> 'DEV')()`,
            },
        ],
    },
});

组件引入

import React from 'react';

import { safeRemoteComponent } from '@umijs/max';
const RemoteCounter = safeRemoteComponent<React.FC<{ init?: number }>>({
    moduleSpecifier: 'mf1/Button',
    fallbackComponent: () => 'fallbacked',
    loadingElement: 'Loading',
});
function App(props) {
    const { onChange, value,childrenStatus } = props;
    return <RemoteCounter value={...} onChange={...} childrenStatus={...} />;
}
export default App;

更多引入方式详见：

github.com/umijs/umi/b… github.com/umijs/umi/b…

常见问题汇总：

报错1

解决方案：

mfsu: {
  shared: {
    react: {
      singleton: true,
    },
  },
},

文档介绍： umijs.org/docs/guides… umijs.org/docs/max/mf

报错2

Context 上下文使用

webpack 用法

链接