webpack5 federation 动态加载模块

使用webpack5构建项目时，使用federation可实现加载在线模块，import-remote-module配合federation实现动态加载在线模块

安装

npm i import-remote-module

使用

import importRemote, {setRemoteConfig} from 'import-remote-module';

setRemoteConfig({
  vizComponent: 'http://localhost:8887/vizComponent/remoteEntry.js'
})

const ButtonGroup = importRemote('vizComponent/libs/ButtonGroup')

<ButtonGroup 
  dimensionsData={[
    {label: '状态A', value: 'a'}, 
    {label: '状态B', value: 'b'}
  ]} 
/>

webpack config中配置

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

config.plugins.push(
  new ModuleFederationPlugin({
    name: 'vizWeb',
    shared: {
      react: { singleton: true },
      'react-dom': { singleton: true },
    },
  }),
);