Webpack 5 Module Federation 是什么？如何使用？

// webpack.config.js (remote app)
const { ModuleFederationPlugin } = require('webpack').container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/components/Button',
        './utils': './src/utils'
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true }
      }
    })
  ]
}

// webpack.config.js (host app)
new ModuleFederationPlugin({
  name: 'hostApp',
  remotes: {
    remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js'
  },
  shared: {
    react: { singleton: true },
    'react-dom': { singleton: true }
  }
})

// 同步加载
import Button from 'remoteApp/Button'
function App() {
  return <Button>Click</Button>
}

// 异步加载（推荐）
const RemoteButton = React.lazy(() => import('remoteApp/Button'))
function App() {
  return (
    <Suspense fallback="Loading">
      <RemoteButton>Click</RemoteButton>
    </Suspense>
  )
}

shared: {
  react: {
    singleton: true,      // 只加载一个实例
    requiredVersion: '^18',
    eager: false,          // 是否同步加载
  }
}
// 如果 host 和 remote 都依赖 react，运行时只加载一个版本

// 动态加载远程模块
async function loadRemote(name, module) {
  // 初始化容器
  await __webpack_init_sharing__('default')
  const container = await loadRemoteContainer(name)
  await container.init(__webpack_share_scopes__.default)
  const factory = await container.get(module)
  return factory()
}

const Button = await loadRemote('remoteApp', './Button')

// 使用 vite-plugin-federation
import federation from '@originjs/vite-plugin-federation'

export default {
  plugins: [
    federation({
      name: 'host',
      remotes: {
        remote: 'http://localhost:3001/assets/remoteEntry.js'
      },
      shared: ['vue']
    })
  ]
}