Module Federation con Webpack 5
Configuri un'app host e un'app remote con Webpack Module Federation per condividere componenti a runtime.
Module Federation con Webpack 5 è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.
Panoramica di Module Federation
Webpack 5 Module Federation consente di condividere moduli JavaScript a runtime tra applicazioni con bundle separati: un'app espone i componenti e un'altra li utilizza senza un passaggio di build.
Ruoli: host e remote
Un remote espone i moduli. Un host utilizza i moduli di uno o più remote. Un'app può essere contemporaneamente host e remote.
Configurazione del remote
Nel webpack.config.js dell'app remote, utilizzate ModuleFederationPlugin per esporre i componenti.
// 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
}),
],
};Configurazione dell'host
Nella configurazione webpack dell'app host, dichiarate quali remote utilizzare e da dove caricarli.
// 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'],
})Utilizzo di un modulo remote
Importate i moduli remote usando il nome del remote come prefisso del percorso. Racchiudeteli in React.lazy e Suspense per il caricamento differito.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Condivisione delle dipendenze
Elencate i pacchetti condivisi con singleton: true in modo che venga caricata una sola copia di React tra tutti i microfrontend.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Remote dinamici
Caricate i remote dinamicamente a runtime dalla configurazione (ad esempio, da un endpoint del manifest) invece di codificare gli URL direttamente nella configurazione 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 con Module Federation
Utilizzate il plugin @module-federation/typescript per generare le dichiarazioni di tipo dei moduli esposti, così gli host dispongono del completamento automatico completo.
Error boundary per i malfunzionamenti dei remote
Racchiudete i componenti remote in error boundary. Se un remote non viene caricato, l'host continua a funzionare in modo controllato invece di arrestarsi.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Module Federation in Vite
Il plugin @originjs/vite-plugin-federation porta Module Federation nei progetti basati su Vite con un'API simile.
// 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'],
}),
],
});Controllo rapido
Che cosa comporta impostare singleton: true per un pacchetto condiviso in Module Federation?
Riepilogo
Module Federation utilizza ModuleFederationPlugin nei remote (per esporre) e negli host (per utilizzare). Importate i moduli remote con lazy(), condividete react come singleton per evitare duplicazioni e racchiudete i remote in error boundary per un degrado controllato.
Domande Frequenti
La lezione «Module Federation con Webpack 5» è gratuita?
Sì — il testo completo di «Module Federation con Webpack 5» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.
Cosa imparerò in «Module Federation con Webpack 5»?
Configuri un'app host e un'app remote con Webpack Module Federation per condividere componenti a runtime. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare React Academy?
Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Module Federation con Webpack 5»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione React Academy?
Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Concetti e compromessi dei micro-frontend
- Module Federation con Webpack 5
- Stato condiviso e routing tra MFE
- Deployment indipendente e pipeline CI per MFE