Module Federation mit Webpack 5
Konfigurieren Sie mit Webpack Module Federation eine Host- und eine Remote-App, um Components zur Laufzeit zu teilen.
Module Federation mit Webpack 5 ist eine kostenlose React Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des React Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Überblick über Module Federation
Webpack 5 Module Federation ermöglicht es, JavaScript-Module zur Laufzeit zwischen separat gebündelten Anwendungen zu teilen – eine App stellt Komponenten bereit, eine andere verwendet sie ohne Build-Schritt.
Rollen: Host und Remote
Ein remote stellt Module bereit. Ein host verwendet Module aus einem oder mehreren Remotes. Eine App kann gleichzeitig Host und Remote sein.
Remote-Konfiguration
Verwenden Sie in der webpack.config.js der Remote-App ModuleFederationPlugin, um Komponenten bereitzustellen.
// 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
}),
],
};Host-Konfiguration
Geben Sie in der Webpack-Konfiguration der Host-App an, welche Remotes verwendet werden sollen und von wo sie geladen werden.
// 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'],
})Ein Remote-Modul verwenden
Importieren Sie Remote-Module mit dem Namen des Remotes als Pfadpräfix. Verpacken Sie sie zum verzögerten Laden in React.lazy und Suspense.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Abhängigkeiten teilen
Listen Sie gemeinsam verwendete Pakete mit singleton: true auf, damit über alle Micro-Frontends hinweg nur eine Kopie von React geladen wird.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Dynamische Remotes
Laden Sie Remotes zur Laufzeit dynamisch aus einer Konfiguration (z. B. einem Manifest-Endpunkt), statt URLs in der Webpack-Konfiguration fest zu codieren.
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 mit Module Federation
Verwenden Sie das Plugin @module-federation/typescript, um Typdeklarationen für bereitgestellte Module zu generieren, damit Hosts vollständige Autovervollständigung erhalten.
Error Boundaries für Remote-Fehler
Umschließen Sie Remote-Komponenten mit Error Boundaries. Wenn ein Remote nicht geladen werden kann, verhält sich der Host weiterhin ordnungsgemäß, statt abzustürzen.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Vite Module Federation
Das Plugin @originjs/vite-plugin-federation bringt Module Federation mit einer ähnlichen API in Vite-basierte Projekte.
// 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'],
}),
],
});Kurztest
Was bewirkt singleton: true für ein gemeinsam verwendetes Paket in Module Federation?
Zusammenfassung
Module Federation verwendet ModuleFederationPlugin in Remotes (zum Bereitstellen) und Hosts (zum Verwenden). Importieren Sie Remote-Module mit lazy(), teilen Sie react als Singleton, um Duplikate zu vermeiden, und umschließen Sie Remotes für eine ordnungsgemäße Fehlerbehandlung mit Error Boundaries.
Häufig gestellte Fragen
Ist die Lektion „Module Federation mit Webpack 5“ kostenlos?
Ja — der vollständige Text von „Module Federation mit Webpack 5“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des React Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der React Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Module Federation mit Webpack 5“?
Konfigurieren Sie mit Webpack Module Federation eine Host- und eine Remote-App, um Components zur Laufzeit zu teilen. Du übst React Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um React Academy zu starten?
Keine Vorkenntnisse erforderlich. React Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „Module Federation mit Webpack 5“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser React Academy-Lektion Code schreiben und ausführen?
Ja. Jede React Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Micro-Frontend-Konzepte und Abwägungen
- Module Federation mit Webpack 5
- Gemeinsamer State und Routing zwischen MFEs
- Unabhängiges Deployment und CI-Pipelines für MFEs