Module Federation (Webpack 5)
// 宿主应用 — webpack.config.js
new ModuleFederationPlugin({
name: 'host',
remotes: {
checkout: 'checkout@https://checkout.example.com/remoteEntry.js',
catalog: 'catalog@https://catalog.example.com/remoteEntry.js',
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
},
})
// 远程应用 — webpack.config.js
new ModuleFederationPlugin({
name: 'checkout',
filename: 'remoteEntry.js',
exposes: {
'./CheckoutFlow': './src/CheckoutFlow',
'./CartButton': './src/CartButton',
},
shared: { react: { singleton: true } },
})
// 在宿主中使用
const CheckoutFlow = React.lazy(() => import('checkout/CheckoutFlow'));