Vue Academy · Aula

Module Federation do Webpack com Vue

ModuleFederationPlugin, exposições, remotos, dependências compartilhadas e carregamento de componentes remotos.

Module Federation do Webpack com Vue é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.

Module Federation no Webpack

O Webpack 5 já inclui o Module Federation. Ele permite que uma compilação exponha módulos para outras compilações e consuma módulos delas durante a execução — a base dos microfrontends em tempo de execução.

Aplicativos hospedeiros e remotes

Há dois papéis: um remote expõe componentes, e um hospedeiro os consome. Um aplicativo pode desempenhar os dois papéis. Um hospedeiro carrega o código de um remote por HTTP durante a execução, não durante a compilação.

O ModuleFederationPlugin

Você configura a federação adicionando ModuleFederationPlugin à matriz de plugins do webpack. Suas opções definem o nome, o que você expõe, o que você consome e as dependências compartilhadas.

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

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

A opção de nome

name é o identificador global exclusivo desta compilação. Os hospedeiros fazem referência a um remote por esse nome.

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

A opção de exposição (remote)

Um remote lista os módulos que compartilha em exposes. As chaves são caminhos públicos; os valores são caminhos para arquivos locais.

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

O manifesto remoteEntry

Um remote gera um manifesto remoteEntry.js que descreve seus módulos expostos. Os hospedeiros carregam esse arquivo para descobrir e buscar o código do remote durante a execução.

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

A opção de remotos (hospedeiro)

Um hospedeiro declara os remotos que consome em remotes, associando um alias local ao nome do remote e à URL de seu remoteEntry.js.

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

A opção de compartilhamento

shared lista as dependências que os dois lados devem compartilhar para evitar o carregamento de duas cópias. Para uma estrutura como Vue, você deve compartilhá-la para que todos os microfrontends usem uma única instância.

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

Instância única: verdadeiro para Vue

Vue deve ser uma instância única — exatamente uma cópia na página. Duas instâncias do Vue quebram a reatividade e a identidade dos componentes. Marque-o como instância única com uma exigência de versão.

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

Consumindo um componente remoto

Importe o módulo remote dinamicamente durante a execução. Como ele é carregado pela rede, use uma import() dinâmica — normalmente envolvida em defineAsyncComponent no Vue.

import { defineAsyncComponent } from "vue"

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

Renderizando o remote

Use o componente assíncrono como qualquer outro no seu modelo. O Webpack busca o código do remote na primeira renderização e o armazena em cache.

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

Verificação rápida

Verifique sua compreensão do Module Federation com Vue.

Recapitulação

Você aprendeu o Module Federation do Webpack:

ModuleFederationPlugin configura a federação; name identifica a compilação.
Um remote lista exposes e gera um manifesto remoteEntry.js.
Um hospedeiro lista remotes, associando um alias a name@URL/remoteEntry.js.
shared evita dependências duplicadas; o Vue precisa de singleton: true.
Consuma um remote por meio de uma import("remote/Module") dinâmica, geralmente com defineAsyncComponent.

Perguntas Frequentes

A aula “Module Federation do Webpack com Vue” é grátis?

Sim — o texto completo de “Module Federation do Webpack com Vue” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.

O que vou aprender em “Module Federation do Webpack com Vue”?

ModuleFederationPlugin, exposições, remotos, dependências compartilhadas e carregamento de componentes remotos. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Vue Academy?

Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Module Federation do Webpack com Vue”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Vue Academy?

Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Princípios da arquitetura de micro-frontends
Module Federation do Webpack com Vue
Plugin de Federation do Vite
Estado compartilhado entre micro-frontends

← Voltar para Vue Academy