Vue Academy · Lektion

Webpack Module Federation mit Vue

ModuleFederationPlugin, exposes, remotes, gemeinsame Abhängigkeiten und das Laden von Remote-Komponenten

Lektion 2 von 413 Schritte

Webpack Module Federation mit Vue ist eine kostenlose Vue 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 Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Module Federation in Webpack

Webpack 5 enthält Module Federation standardmäßig. Damit kann ein Build Module für andere Builds bereitstellen und zur Laufzeit Module von ihnen verwenden – die Grundlage für Micro-Frontends zur Laufzeit.

Hosts und Remotes

Es gibt zwei Rollen: Ein Remote stellt Komponenten bereit, und ein Host verwendet sie. Eine App kann beide Rollen übernehmen. Ein Host lädt den Code eines Remotes zur Laufzeit über HTTP und nicht zur Build-Zeit.

Das ModuleFederationPlugin

Sie konfigurieren Federation, indem Sie ModuleFederationPlugin zum webpack-Array plugins hinzufügen. Seine Optionen legen den Namen, die bereitgestellten und verwendeten Module sowie gemeinsame Abhängigkeiten fest.

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

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

Die Option name

name ist der eindeutige globale Bezeichner dieses Builds. Hosts referenzieren ein Remote über diesen Namen.

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

Die Option exposes (Remote)

Ein Remote führt in exposes die Module auf, die es bereitstellt. Die Schlüssel sind öffentliche Pfade, die Werte lokale Dateipfade.

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

Das remoteEntry-Manifest

Ein Remote erstellt ein remoteEntry.js-Manifest, das seine bereitgestellten Module beschreibt. Hosts laden diese Datei, um den Code des Remotes zur Laufzeit zu finden und abzurufen.

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

Die Option remotes (Host)

Ein Host gibt in remotes an, welche Remotes er verwendet. Dabei wird ein lokaler Alias dem Namen des Remotes und seiner URL für remoteEntry.js zugeordnet.

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

Die Option shared

shared führt Abhängigkeiten auf, die beide Seiten gemeinsam verwenden sollten, damit nicht zwei Kopien geladen werden. Bei einem Framework wie Vue müssen Sie es teilen, damit alle Micro-Frontends dieselbe Instanz verwenden.

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

singleton: true für Vue

Vue muss ein Singleton sein – es darf genau eine Kopie auf der Seite geben. Zwei Vue-Instanzen beeinträchtigen Reaktivität und Komponentenidentität. Kennzeichnen Sie Vue mit einer Versionsanforderung als Singleton.

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

Eine Remote-Komponente verwenden

Importieren Sie das Remote-Modul dynamisch zur Laufzeit. Da es über das Netzwerk geladen wird, verwenden Sie einen dynamischen import() – in Vue typischerweise umschlossen von defineAsyncComponent.

import { defineAsyncComponent } from "vue"

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

Das Remote rendern

Verwenden Sie die asynchrone Komponente wie jede andere in Ihrem Template. Webpack ruft den Code des Remotes beim ersten Rendern ab und speichert ihn im Cache.

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

Kurzer Check

Überprüfen Sie Ihr Verständnis von Module Federation mit Vue.

Beantworte es in der interaktiven Lektion

Zusammenfassung

Sie haben Webpack Module Federation kennengelernt:

ModuleFederationPlugin konfiguriert Federation; name identifiziert den Build.
Ein Remote führt exposes auf und erzeugt ein remoteEntry.js-Manifest.
Ein Host führt remotes auf und ordnet einen Alias dem Muster name@URL/remoteEntry.js zu.
shared verhindert doppelte Abhängigkeiten; für Vue ist singleton: true erforderlich.
Verwenden Sie ein Remote über import("remote/Module"), häufig zusammen mit defineAsyncComponent.

Kostenlos starten

Lerne HTML mit einem KI-Tutor — kostenlos

Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.

Kurse: 42
Lektionen: 156

Kostenlos lernen Den vollständigen Kurs ansehen

Häufig gestellte Fragen

Ist die Lektion „Webpack Module Federation mit Vue“ kostenlos?

Ja — der vollständige Text von „Webpack Module Federation mit Vue“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Webpack Module Federation mit Vue“?

ModuleFederationPlugin, exposes, remotes, gemeinsame Abhängigkeiten und das Laden von Remote-Komponenten Du übst Vue 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 Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue 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 „Webpack Module Federation mit Vue“?

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 Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue 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

Prinzipien der Micro-Frontend-Architektur
Webpack Module Federation mit Vue
Vite Federation Plugin
Gemeinsamer Status über Micro-Frontends hinweg

← Zurück zu Vue Academy