Module Federation med Webpack 5
Konfigurér en host- og remote-app med Webpack Module Federation for at dele komponenter under kørsel.
Module Federation med Webpack 5 er en gratis React Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i React Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. React Academy-kurset indeholder 4 lektioner i alt.
Oversigt over Module Federation
Webpack 5 Module Federation lader dig dele JavaScript-moduler mellem separat bundtede applikationer ved kørselstid — én app eksponerer komponenter, og en anden bruger dem uden et byggetrin.
Roller: Vært vs. fjernapp
En fjernapp eksponerer moduler. En værtsapp bruger moduler fra en eller flere fjernapps. En app kan samtidig være både vært og fjernapp.
Konfiguration af fjernappen
I fjernappens webpack.config.js skal du bruge ModuleFederationPlugin til at eksponere 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 af værtsappen
Angiv i værtsappens webpack-konfiguration, hvilke fjernapps der skal bruges, og hvor de skal indlæses fra.
// 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'],
})Brug af et fjernmodul
Importér fjernmoduler ved at bruge fjernappens navn som sti-præfiks. Pak dem ind i React.lazy og Suspense for doven indlæsning.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Deling af afhængigheder
Angiv delte pakker med singleton: true, så der kun indlæses én kopi af React på tværs af alle mikrofrontends.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Dynamiske fjernapps
Indlæs fjernapps dynamisk ved kørselstid fra en konfiguration (f.eks. et manifest-endepunkt) i stedet for at hardkode 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
Brug plugin'et @module-federation/typescript til at generere typeangivelser for eksponerede moduler, så værtsapps får fuld autoudfyldning.
Fejlgrænser ved fejl i fjernapps
Indkapsl fjernkomponenter i fejlgrænser. Hvis en fjernapp ikke kan indlæses, håndterer værtsappen fejlen på en kontrolleret måde i stedet for at gå ned.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Vite Module Federation
Plugin'et @originjs/vite-plugin-federation bringer Module Federation til Vite-baserede projekter med en lignende 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'],
}),
],
});Hurtigt tjek
Hvad gør det at angive singleton: true for en delt pakke i Module Federation?
Opsummering
Module Federation bruger ModuleFederationPlugin i fjernapps (til at eksponere) og værtsapps (til at bruge). Importér fjernmoduler med lazy(), del react som en singleton for at undgå duplikering, og pak fjernapps ind i fejlgrænser for en kontrolleret forringelse.
Lær React med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 88
- Lektioner
- 324
Ofte stillede spørgsmål
Er lektionen “Module Federation med Webpack 5” gratis?
Ja — hele teksten til “Module Federation med Webpack 5” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af React Academy-kurset, skal du opgradere til CoddyKit PRO. React Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Module Federation med Webpack 5”?
Konfigurér en host- og remote-app med Webpack Module Federation for at dele komponenter under kørsel. Du øver dig i React Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på React Academy?
Der kræves ingen tidligere erfaring. React Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Module Federation med Webpack 5”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne React Academy-lektion?
Ja. Alle React Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Mikrofrontend-koncepter og afvejninger
- Module Federation med Webpack 5
- Delt tilstand og routing mellem MFE’er
- Uafhængig deployment og CI-pipelines til MFE’er