Fédération de modules avec Webpack 5
Configurez une application hôte et une application distante avec la fédération de modules Webpack pour partager des composants à l’exécution.
Fédération de modules avec Webpack 5 est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Vue d’ensemble de Module Federation
Webpack 5 Module Federation permet de partager des modules JavaScript entre des applications empaquetées séparément, à l’exécution : une application expose des composants et une autre les consomme sans étape de compilation.
Rôles : hôte et module distant
Un module distant expose des modules. Un hôte consomme les modules d’un ou de plusieurs modules distants. Une application peut être simultanément hôte et module distant.
Configuration du module distant
Dans le fichier webpack.config.js de l’application distante, utilisez ModuleFederationPlugin pour exposer des composants.
// 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
}),
],
};Configuration de l’hôte
Dans la configuration Webpack de l’application hôte, déclarez les modules distants à consommer et l’emplacement depuis lequel les charger.
// 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'],
})Consommer un module distant
Importez les modules distants en utilisant le nom du module distant comme préfixe de chemin. Encadrez-les dans React.lazy et Suspense pour un chargement différé.
import React, { lazy, Suspense } from 'react';
const ProductCard = lazy(() => import('products/ProductCard'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<ProductCard productId="123" />
</Suspense>
);
}Partager les dépendances
Répertoriez les packages partagés avec singleton: true afin qu’une seule copie de React soit chargée entre toutes les micro-interfaces.
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
'@company/design-system': { singleton: true },
},Modules distants dynamiques
Chargez dynamiquement les modules distants à l’exécution depuis une configuration (par exemple, un point de terminaison de manifeste), au lieu de coder leurs adresses en dur dans la configuration 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 avec Module Federation
Utilisez le plugin @module-federation/typescript pour générer les déclarations de types des modules exposés afin que les hôtes bénéficient d’une autocomplétion complète.
Limites d’erreur pour les défaillances des modules distants
Encadrez les composants distants dans des limites d’erreur. Si un module distant ne peut pas être chargé, l’hôte continue à fonctionner correctement au lieu de planter.
<ErrorBoundary fallback={<div>Product unavailable</div>}>
<Suspense fallback={<Skeleton />}>
<ProductCard productId={id} />
</Suspense>
</ErrorBoundary>Module Federation avec Vite
Le plugin @originjs/vite-plugin-federation apporte Module Federation aux projets basés sur Vite avec une interface de programmation similaire.
// 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'],
}),
],
});Vérification rapide
Que fait la définition d’un paquet partagé comme instance unique dans Module Federation ?
Récapitulatif
Module Federation utilise ModuleFederationPlugin dans les modules distants (pour exposer) et dans les hôtes (pour consommer). Importez les modules distants avec lazy(), partagez react comme instance unique pour éviter la duplication et encadrez les modules distants dans des limites d’erreur afin d’assurer un fonctionnement dégradé sans plantage.
Questions Fréquemment Posées
La leçon « Fédération de modules avec Webpack 5 » est-elle gratuite ?
Oui — le texte complet de « Fédération de modules avec Webpack 5 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fédération de modules avec Webpack 5 » ?
Configurez une application hôte et une application distante avec la fédération de modules Webpack pour partager des composants à l’exécution. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Fédération de modules avec Webpack 5 » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Concepts des micro-frontends et compromis
- Fédération de modules avec Webpack 5
- État partagé et routage entre MFE
- Déploiement indépendant et pipelines CI pour les MFE