Federação de módulos com Webpack 5
Configure um aplicativo hospedeiro e um remoto com a federação de módulos do Webpack para compartilhar componentes em tempo de execução.
Federação de módulos com Webpack 5 é uma aula grátis de React Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de React Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de React Academy inclui 4 aulas no total.
Visão geral do Module Federation
O Webpack 5 Module Federation permite compartilhar módulos JavaScript entre aplicações agrupadas separadamente em tempo de execução — uma aplicação expõe componentes e outra os consome sem uma etapa de compilação.
Funções: hospedeira e remota
Uma aplicação remota expõe módulos. Uma aplicação hospedeira consome módulos de uma ou mais aplicações remotas. Uma aplicação pode ser hospedeira e remota simultaneamente.
Configuração da aplicação remota
No webpack.config.js da aplicação remota, use ModuleFederationPlugin para expor componentes.
// Remote: apps/products/webpack.config.js
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: 'products', // remote name
filename: 'remoteEntry.js', // entry file
exposes: {
'./ProductCard': './src/components/ProductCard', // exposed module
'./CartButton': './src/components/CartButton',
},
shared: ['react', 'react-dom'], // share deps to avoid duplication
}),
],
};Configuração da aplicação hospedeira
Na configuração do webpack da aplicação hospedeira, declare quais aplicações remotas serão consumidas e de onde elas serão carregadas.
// Host: apps/shell/webpack.config.js
new ModuleFederationPlugin({
name: 'shell',
remotes: {
products: 'products@http://localhost:3001/remoteEntry.js',
cart: 'cart@http://localhost:3002/remoteEntry.js',
},
shared: ['react', 'react-dom'],
})Consumo de um módulo remoto
Importe módulos remotos usando o nome da aplicação remota como prefixo do caminho. Envolva-os em React.lazy e Suspense para carregamento sob demanda.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Compartilhamento de dependências
Liste os pacotes compartilhados com singleton: true para que apenas uma cópia do React seja carregada em todos os microfrontends.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Aplicações remotas dinâmicas
Carregue aplicações remotas dinamicamente em tempo de execução a partir da configuração (por exemplo, de um ponto de acesso a um manifesto), em vez de codificar URLs na configuração do webpack.
async function loadRemote(scope, module) {
await __webpack_init_sharing__('default');
const container = window[scope];
await container.init(__webpack_share_scopes__.default);
const factory = await container.get(module);
return factory();
}
const ProductCard = React.lazy(() => loadRemote('products', './ProductCard'));TypeScript com Module Federation
Use o plug-in @module-federation/typescript para gerar declarações de tipos para os módulos expostos, permitindo que as aplicações hospedeiras tenham conclusão automática completa.
Limites de erro para falhas de aplicações remotas
Envolva os componentes remotos em limites de erro. Se uma aplicação remota falhar ao carregar, a aplicação hospedeira continuará funcionando de forma controlada em vez de falhar.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Module Federation no Vite
O plug-in @originjs/vite-plugin-federation leva o Module Federation a projetos baseados no Vite com uma API semelhante.
// vite.config.ts (remote)
import federation from '@originjs/vite-plugin-federation';
export default defineConfig({
plugins: [
federation({
name: 'products',
filename: 'remoteEntry.js',
exposes: { './ProductCard': './src/ProductCard' },
shared: ['react'],
}),
],
});Verificação rápida
O que definir um pacote compartilhado como uma instância única no Module Federation faz?
Resumo
O Module Federation usa ModuleFederationPlugin nas aplicações remotas (para expor) e nas aplicações hospedeiras (para consumir). Importe módulos remotos com lazy(), compartilhe o react como uma instância única para evitar duplicação e envolva as aplicações remotas em limites de erro para uma degradação controlada.
Perguntas Frequentes
A aula “Federação de módulos com Webpack 5” é grátis?
Sim — o texto completo de “Federação de módulos com Webpack 5” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de React Academy, atualize para CoddyKit PRO. O curso de React Academy inclui 4 aulas no total.
O que vou aprender em “Federação de módulos com Webpack 5”?
Configure um aplicativo hospedeiro e um remoto com a federação de módulos do Webpack para compartilhar componentes em tempo de execução. Você pratica React Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar React Academy?
Nenhuma experiência prévia é necessária. React Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Federação de módulos com Webpack 5”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de React Academy?
Sim. Cada aula de React Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Conceitos e compensações de microfrontends
- Federação de módulos com Webpack 5
- Estado compartilhado e roteamento entre MFEs
- Implantação independente e pipelines de CI para MFEs