import-remote-module

webpack5 federation 动态加载模块

在webpack5构建的项目时，使用federation实现加载在线模块，并且实现动态加载在线模块

安装

npm i require-remote

使用

import requireRemote, {setRemoteConfig} from 'require-remote';

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

const ButtonGroup = requireRemote('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 },
    },
  }),
);