Module Federation med Webpack 5
Konfigurera en värdapp och en fjärrapp med Webpack Module Federation för att dela komponenter vid körning.
Module Federation med Webpack 5 är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.
Översikt över Module Federation
Webpack 5 Module Federation låter er dela JavaScript-moduler mellan separat paketerade applikationer vid körning — en app exponerar komponenter och en annan använder dem utan ett byggsteg.
Roller: host kontra remote
En remote exponerar moduler. En host använder moduler från en eller flera remotes. En app kan samtidigt vara både host och remote.
Konfiguration av remote
Använd ModuleFederationPlugin i remote-appens webpack.config.js för att exponera komponenter.
// 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
}),
],
};Konfiguration av host
Ange i host-appens webpack-konfiguration vilka remotes som ska användas och var de ska läsas in från.
// 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'],
})Använda en remote-modul
Importera remote-moduler genom att använda remote-namnet som prefix i sökvägen. Omslut dem i React.lazy och Suspense för lazy loading.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Dela beroenden
Ange delade paket med singleton: true så att endast en kopia av React läses in i alla microfrontends.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Dynamiska remotes
Läs in remotes dynamiskt vid körning från en konfiguration (till exempel en manifest-endpoint) i stället för att hårdkoda URL:er i webpack-konfigurationen.
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 med Module Federation
Använd plugin-programmet @module-federation/typescript för att generera typdeklarationer för exponerade moduler, så att host-appar får fullständig autokomplettering.
Error boundaries vid fel i remotes
Omslut remote-komponenter i error boundaries. Om en remote inte kan läsas in hanterar host-appen felet på ett kontrollerat sätt i stället för att krascha.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Vite Module Federation
Plugin-programmet @originjs/vite-plugin-federation tillför Module Federation till Vite-baserade projekt med ett liknande API.
// 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'],
}),
],
});Snabbtest
Vad innebär det att ange singleton: true för ett delat paket i Module Federation?
Sammanfattning
Module Federation använder ModuleFederationPlugin i remotes (för att exponera) och hosts (för att använda). Importera remote-moduler med lazy(), dela react som singleton för att undvika duplicering och omslut remotes i error boundaries för kontrollerad degradering.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Module Federation med Webpack 5” gratis?
Ja – hela texten till ”Module Federation med Webpack 5” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Module Federation med Webpack 5”?
Konfigurera en värdapp och en fjärrapp med Webpack Module Federation för att dela komponenter vid körning. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Module Federation med Webpack 5”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Mikrofrontend-koncept och avvägningar
- Module Federation med Webpack 5
- Delad state och routing mellan MFE:er
- Oberoende driftsättning och CI-pipelines för MFE:er