Vue Academy · Lección

Module Federation de Webpack con Vue

ModuleFederationPlugin, exposes, remotes, dependencias compartidas y carga de componentes remotos

Module Federation de Webpack con Vue es una lección gratuita de Vue 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 Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.

Module Federation en Webpack

Webpack 5 incluye Module Federation de forma integrada. Permite que una compilación exponga módulos a otras compilaciones y consuma módulos de ellas durante la ejecución, lo que constituye la base de los microfrontends en tiempo de ejecución.

Hosts y remotos

Hay dos roles: un remote expone componentes y un host los consume. Una aplicación puede desempeñar ambos roles. Un host carga el código de un remoto mediante HTTP durante la ejecución, no durante la compilación.

El ModuleFederationPlugin

La federación se configura añadiendo ModuleFederationPlugin al array plugins de webpack. Sus opciones definen el nombre, lo que se expone, lo que se consume y las dependencias compartidas.

const { ModuleFederationPlugin } = require("webpack").container

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: "checkout",
    }),
  ],
}

La opción name

name es el identificador global único de esta compilación. Los hosts hacen referencia a un remoto mediante este nombre.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
})

La opción exposes (remoto)

Un remoto enumera los módulos que comparte en exposes. Las claves son rutas públicas y los valores son rutas de archivos locales.

new ModuleFederationPlugin({
  name: "checkout",
  filename: "remoteEntry.js",
  exposes: {
    "./CartButton": "./src/components/CartButton.vue",
  },
})

El manifiesto remoteEntry

Un remoto genera un manifiesto remoteEntry.js que describe sus módulos expuestos. Los hosts cargan este archivo para descubrir y obtener el código del remoto durante la ejecución.

// host loads: https://checkout.example.com/remoteEntry.js

La opción remotes (host)

Un host declara los remotos que consume en remotes, asignando un alias local al nombre del remoto y a su URL de remoteEntry.js.

new ModuleFederationPlugin({
  name: "shell",
  remotes: {
    checkout: "checkout@https://checkout.example.com/remoteEntry.js",
  },
})

La opción shared

shared enumera las dependencias que ambos lados deben compartir para evitar cargar dos copias. En el caso de un framework como Vue, debe compartirlo para que todos los microfrontends utilicen una sola instancia.

new ModuleFederationPlugin({
  name: "shell",
  remotes: { /* ... */ },
  shared: ["vue"],
})

singleton: true para Vue

Vue debe ser un singleton: debe haber exactamente una copia en la página. Dos instancias de Vue rompen la reactividad y la identidad de los componentes. Márquelo como singleton con un requisito de versión.

shared: {
  vue: {
    singleton: true,
    requiredVersion: "^3.4.0",
  },
}

Consumir un componente remoto

Importe el módulo remoto dinámicamente durante la ejecución. Como se carga a través de la red, utilice un import() dinámico, normalmente encapsulado en defineAsyncComponent en Vue.

import { defineAsyncComponent } from "vue"

const CartButton = defineAsyncComponent(() =>
  import("checkout/CartButton")
)

Renderizar el remoto

Utilice el componente asíncrono como cualquier otro en su plantilla. Webpack obtiene el código del remoto durante el primer renderizado y lo almacena en caché.

<template>
  <header>
    <CartButton />
  </header>
</template>

Comprobación rápida

Compruebe su comprensión de Module Federation con Vue.

Resumen

Aprendió Module Federation de Webpack:

ModuleFederationPlugin configura la federación; name identifica la compilación.
Un remoto enumera sus módulos en exposes y genera un manifiesto remoteEntry.js.
Un host enumera los remotes y asigna un alias a name@URL/remoteEntry.js.
shared evita las dependencias duplicadas; Vue necesita singleton: true.
Consuma un remoto mediante import("remote/Module") dinámico, normalmente con defineAsyncComponent.

Preguntas frecuentes

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

Sí — el texto completo de «Module Federation de Webpack con Vue» 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 Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.

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

ModuleFederationPlugin, exposes, remotes, dependencias compartidas y carga de componentes remotos Practicas Vue 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 Vue Academy?

No se requiere experiencia previa. Vue 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 de Webpack con Vue»?

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 Vue Academy?

Sí. Cada lección de Vue 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

Principios de arquitectura de microfrontends
Module Federation de Webpack con Vue
Plugin de Federation para Vite
Estado compartido entre microfrontends

← Volver a Vue Academy