Ответ
Для настройки Micro Frontend часто используют Module Federation из Webpack. Он позволяет разделять код между независимыми приложениями, загружая их динамически.
Пример конфигурации в webpack.config.js:
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'app1',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/components/Button',
},
remotes: {
app2: 'app2@http://localhost:3002/remoteEntry.js',
},
shared: ['react', 'react-dom'],
}),
],
};
Ключевые моменты:
exposes– что предоставляем другим приложениям.remotes– что подключаем из других приложений.shared– общие зависимости для оптимизации.
Альтернативы: Single SPA, Piral, Bit.