Vue Academy · 课时

使用 Vue 的 Webpack Module Federation

Q: 「使用 Vue 的 Webpack Module Federation」这节课中我会学到什么？

ModuleFederationPlugin、exposes、remotes、共享依赖，以及远程组件加载 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

ModuleFederationPlugin、exposes、remotes、共享依赖，以及远程组件加载

使用 Vue 的 Webpack Module Federation 是 CoddyKit 上的免费 Vue Academy 课时。这是第 2 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 4 节课。

Webpack 中的模块联邦

Webpack 5 内置了模块联邦。它允许一个构建向其他构建公开模块，并在运行时使用其他构建中的模块，这是运行时微前端的基础。

宿主端与远程端

有两种角色：远程端公开组件，宿主端使用这些组件。一个应用可以同时扮演两种角色。宿主端会在运行时通过 HTTP 加载远程端代码，而不是在构建时加载。

ModuleFederationPlugin

将 ModuleFederationPlugin 添加到 webpack 的 plugins 数组中，即可配置模块联邦。它的选项用于定义名称、公开内容、使用内容以及共享依赖项。

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

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

name 选项

name 是当前构建的唯一全局标识符。宿主端通过此名称引用远程端。

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

exposes 选项（远程端）

远程端会在 exposes 中列出要共享的模块。键是公开路径，值是本地文件路径。

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

remoteEntry 清单

远程端会构建一个 remoteEntry.js 清单，用于描述其公开的模块。宿主端加载此文件，以便在运行时发现并获取远程端代码。

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

remotes 选项（宿主端）

宿主端会在 remotes 中声明要使用的远程端，将本地别名映射到远程端名称及其 remoteEntry.js URL。

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

shared 选项

shared 列出双方应该共享的依赖项，以避免加载两个副本。对于 Vue 这样的框架，必须将其设为共享，从而确保所有微前端使用同一个实例。

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

Vue 的 singleton: true 配置

Vue 必须是单例——页面中只能有一个副本。两个 Vue 实例会破坏响应性和组件身份。请通过版本要求将其标记为单例。

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

使用远程组件

在运行时动态导入远程模块。由于它通过网络加载，请使用动态 import()——在 Vue 中通常会用 defineAsyncComponent 对其进行包装。

import { defineAsyncComponent } from "vue"

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

渲染远程组件

像使用其他组件一样在模板中使用异步组件。Webpack 会在首次渲染时获取远程端代码并将其缓存。

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

快速检查

检查您对 Vue 模块联邦的理解。

回顾

您学习了 Webpack 模块联邦：

ModuleFederationPlugin 用于配置模块联邦；name 用于标识构建。
远程端列出 exposes，并生成 remoteEntry.js 清单。
宿主端列出 remotes，将别名映射到 name@URL/remoteEntry.js。
shared 可避免依赖项重复；Vue 需要设置 singleton: true。
通过动态 import("remote/Module") 使用远程模块，通常还会配合 defineAsyncComponent。

常见问题解答

「使用 Vue 的 Webpack Module Federation」课时是免费的吗？

是的 — 「使用 Vue 的 Webpack Module Federation」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 4 节课。

「使用 Vue 的 Webpack Module Federation」这节课中我会学到什么？

ModuleFederationPlugin、exposes、remotes、共享依赖，以及远程组件加载你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 4 节。

「使用 Vue 的 Webpack Module Federation」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Vue Academy