0Pricing
React Academy · Lección

Module Federation con Webpack 5

Configure una aplicación host y una remota con Webpack Module Federation para compartir componentes en tiempo de ejecución.

Module Federation con Webpack 5 es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Descripción general de Module Federation

Module Federation de Webpack 5 permite compartir módulos de JavaScript entre aplicaciones empaquetadas por separado en tiempo de ejecución: una aplicación expone componentes y otra los consume sin un paso de compilación.

Roles: host frente a remote

Un remote expone módulos. Un host consume módulos de uno o varios remotes. Una aplicación puede ser host y remote al mismo tiempo.

Configuración del remote

En el archivo webpack.config.js de la aplicación remote, utilice ModuleFederationPlugin para exponer componentes.

// 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
    }),
  ],
};

Configuración del host

En la configuración de webpack de la aplicación host, declare qué remotes se consumirán y desde dónde se cargará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'],
})

Consumo de un módulo remote

Importe los módulos remotos utilizando el nombre del remote como prefijo de ruta. Envuélvalos en React.lazy y Suspense para cargarlos de forma diferida.

import React, { lazy, Suspense } from 'react';

const ProductCard = lazy(() => import('products/ProductCard'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <ProductCard productId="123" />
    </Suspense>
  );
}

Compartir dependencias

Enumere los paquetes compartidos con singleton: true para que solo se cargue una copia de React entre todos los micro-frontends.

shared: {
  react: { singleton: true, requiredVersion: '^18.0.0' },
  'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
  '@company/design-system': { singleton: true },
},

Remotes dinámicos

Cargue los remotes dinámicamente en tiempo de ejecución desde la configuración (por ejemplo, desde un endpoint de manifiesto) en lugar de codificar las URL directamente en la configuración de 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

Utilice el plugin @module-federation/typescript para generar declaraciones de tipos para los módulos expuestos, de modo que los hosts obtengan autocompletado completo.

Límites de error para fallos de remotes

Envuelva los componentes remotos en límites de error. Si un remote no se puede cargar, el host se degrada correctamente en lugar de bloquearse.

<ErrorBoundary fallback={<div>Product unavailable</div>}>
  <Suspense fallback={<Skeleton />}>
    <ProductCard productId={id} />
  </Suspense>
</ErrorBoundary>

Module Federation en Vite

El plugin @originjs/vite-plugin-federation incorpora Module Federation a los proyectos basados en Vite con una API similar.

// 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'],
    }),
  ],
});

Comprobación rápida

¿Qué efecto tiene establecer singleton: true para un paquete compartido en Module Federation?

Resumen

Module Federation utiliza ModuleFederationPlugin en los remotes (para exponer) y en los hosts (para consumir). Importe los módulos remotos con lazy(), comparta react como singleton para evitar duplicaciones y envuelva los remotes en límites de error para lograr una degradación controlada.

Preguntas frecuentes

¿La lección «Module Federation con Webpack 5» es gratis?

Sí — el texto completo de «Module Federation con Webpack 5» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Module Federation con Webpack 5»?

Configure una aplicación host y una remota con Webpack Module Federation para compartir componentes en tiempo de ejecución. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Module Federation con Webpack 5»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Conceptos y compromisos de los micro-frontends
  2. Module Federation con Webpack 5
  3. Estado compartido y routing entre MFEs
  4. Despliegue independiente y pipelines de CI para MFEs
← Volver a React Academy