[웹팩] 모듈 페더레이션 - 동작 흐름 정리

✅ Webpack Module Federation 흐름 재설명

요청하신 Module Federation의 동작 과정을 Webpack Compiler의 실행 단계에 따라 vue.config.js 환경에 맞춰 설명ㄱ

 

---

 

📋 Module Federation 동작 과정 요약

아래는 Webpack의 Module Federation이 동작하는 전체 흐름입니다

 

1️⃣ [Webpack Compiler 시작]
2️⃣ [ModuleFederationPlugin.apply()]
3️⃣ [compiler.hooks.make]
4️⃣ [ContainerEntryModule 생성]
5️⃣ [remoteEntry.js 생성]
6️⃣ [Webpack 런타임에서 remoteEntry.js 로드]
7️⃣ [호스트 앱이 리모트 모듈 사용]

 

각 단계에서 **Vue CLI 환경(vue.config.js)**에 맞는 설정 및 내부 동작을 설명합니다.

 

---

🔍 1️⃣ [Webpack Compiler 시작]

Webpack은 프로젝트를 빌드할 때 **vue.config.js**에서 정의된 설정을 읽고, 빌드 프로세스를 시작합니다.

▶ Vue CLI에서 Webpack 설정 위치

• vue.config.js 파일은 Vue CLI 프로젝트에서 Webpack 설정을 확장하는 역할을 합니다.
• Vue CLI는 내부적으로 Webpack을 사용하여 앱을 빌드하며, 모든 설정은 configureWebpack 또는 **chainWebpack**을 통해 Webpack에 주입됩니다.

 

📄 vue.config.js

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

module.exports = {
  publicPath: "auto",
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "remoteApp",
        filename: "remoteEntry.js",
        exposes: {
          "./ComponentA": "./src/components/ComponentA.vue",
          "./routes": "./src/router/routes.js",
        },
        shared: {
          vue: { singleton: true, requiredVersion: "^3.4.0" },
        },
      }),
    ],
  },
};

 

주요 설정 값이 Webpack 내부에서 어떻게 쓰이는지

설정 값설명Webpack 내부에서의 동작

name	리모트 앱의 이름 (remoteMaestro1)	remoteEntry.js 파일 생성 시 이 이름이 사용됨
filename	리모트 엔트리 파일 (remoteEntry.js)의 이름	Webpack이 해당 파일을 생성하고 배포 시 사용
exposes	호스트가 사용할 수 있도록 공유할 모듈 정의	Webpack이 리모트 앱의 모듈을 export하고 이를 호스트에서 import할 수 있게 처리
shared	호스트와 리모트 간에 공유할 라이브러리 정의	Webpack이 중복된 라이브러리를 제거하고 싱글톤으로 관리
singleton	공유 라이브러리를 하나의 인스턴스로 강제하는 옵션	Webpack이 모듈 충돌을 방지하고 하나의 인스턴스만 사용하도록 관리
eager	모듈을 즉시 로드할지 여부	Webpack이 코드 스플리팅을 비활성화하고 즉시 로드되도록 처리

 

Webpack 내부 코드에서 ModuleFederationPlugin이 어떻게 작동하는지

▶ Webpack 내부 코드 흐름 요약

1. Webpack Compiler 시작
   Webpack이 프로젝트를 번들링하기 시작할 때, compiler 인스턴스가 생성됨.
2. ModuleFederationPlugin.apply() 호출
   vue.config.js에서 설정된 ModuleFederationPlugin이 호출되어 Webpack Compiler에 플러그인을 등록.
3. compiler.hooks.make Hook 실행
   Webpack의 make 단계에서 리모트 엔트리 파일을 생성하는 로직이 실행됨.
4. remoteEntry.js 생성
   exposes와 shared 설정을 기반으로 remoteEntry.js 파일이 생성되고, 이 파일을 통해 리모트 모듈이 호스트에서 로드될 수 있도록 설정됨.

---

🔧 2️⃣ [ModuleFederationPlugin.apply()]

Webpack이 실행되면, **ModuleFederationPlugin**이 Webpack의 Compiler 인스턴스에 적용됩니다.

▶ ModuleFederationPlugin 동작 개요

• **ModuleFederationPlugin**은 Webpack에서 플러그인으로 작동합니다.
• apply() 메서드를 통해 Webpack의 여러 빌드 단계에 **Hooks(훅)**을 주입합니다.

---

🔧 3️⃣ [compiler.hooks.make]

Webpack이 모듈을 컴파일할 때, make 단계에서 **ModuleFederationPlugin**이 실행됩니다.

compiler.hooks.make.tapAsync(
  "ModuleFederationPlugin",
  (compilation, callback) => {
    new ContainerEntryModule(compilation, this.options).apply();
    callback();
  }
);

 

▶ Vue 환경에서 어떤 일이 일어나는가?

• Webpack이 호스트 앱과 리모트 앱을 빌드할 때, remoteEntry.js 파일을 생성하는 작업이 시작됩니다.
• Vue CLI는 이 작업을 configureWebpack 또는 **chainWebpack**을 통해 Webpack에 전달합니다.

---

🧩 4️⃣ [ContainerEntryModule 생성]

**ContainerEntryModule**은 Webpack 내부에서 **리모트 엔트리(remoteEntry.js)**를 생성하는 역할을 합니다.

▶ ContainerEntryModule 역할

• 리모트 모듈을 정의하고, Webpack의 Assets 목록에 remoteEntry.js 파일을 추가합니다.

class ContainerEntryModule {
  constructor(compilation, options) {
    this.compilation = compilation;
    this.options = options;
  }

  apply() {
    this.compilation.hooks.processAssets.tap(
      {
        name: "ContainerEntryModule",
        stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,
      },
      (assets) => {
        assets["remoteEntry.js"] = this.generateRemoteEntry();
      }
    );
  }

  generateRemoteEntry() {
    return `
      const remoteModules = {
        './ComponentA': () => import('./src/components/ComponentA.vue'),
      };
      export default remoteModules;
    `;
  }
}

 

🗂 5️⃣ [remoteEntry.js 생성]

Webpack은 리모트 앱의 엔트리 포인트로 사용할 remoteEntry.js 파일을 생성합니다.

 

▶ remoteEntry.js 예시

const remoteModules = {
  "./ComponentA": () => import("./src/components/ComponentA.vue"),
  "./routes": () => import("./src/router/routes.js"),
};

export default remoteModules;

 

---

🔄 6️⃣ [Webpack 런타임에서 remoteEntry.js 로드]

호스트 앱에서 Webpack 런타임이 실행되면, remoteEntry.js 파일을 동적으로 가져와서 리모트 모듈을 사용합니다.

▶ Vue 호스트 앱의 코드 예시

const remoteRoutes = await import("remoteApp/routes");

 

---

🔧 7️⃣ [호스트 앱이 리모트 모듈 사용]

호스트 앱이 remoteEntry.js를 통해 리모트 모듈을 가져와서 사용합니다.

// 리모트 모듈의 라우트 가져오기
async function loadRemoteRoutes() {
  const remoteRoutes = await import("remoteApp/routes");
  remoteRoutes.default.forEach((route) => {
    router.addRoute("hostPage", route);
  });
}

 

---

✅ Vue CLI 환경에서 중요한 차이점

Webpack 설정Vue CLI 설정

webpack.config.js	vue.config.js
module.exports	module.exports
plugins: []	configureWebpack: {}
chainWebpack	Vue의 Webpack 설정 확장 방법

 

---

 

🧩 결론: Webpack 동작 요약 (Vue CLI 적용)

1️⃣ [Vue CLI 시작]
      ↓
2️⃣ [Webpack Compiler 시작]
      ↓
3️⃣ [ModuleFederationPlugin 적용]
      ↓
4️⃣ [make 훅에서 ContainerEntryModule 생성]
      ↓
5️⃣ [remoteEntry.js 생성]
      ↓
6️⃣ [remoteEntry.js를 Webpack 런타임에서 로드]
      ↓
7️⃣ [호스트 앱이 리모트 모듈 사용]

 

▶ 중요 포인트

• Webpack의 모든 설정은 **vue.config.js**를 통해 적용할 수 있습니다.
• Module Federation은 remoteEntry.js 파일을 생성하고, Webpack 런타임이 이를 로드하여 호스트 앱에서 사용할 수 있도록 합니다.

이제 Webpack의 내부 동작을 Vue CLI 환경에 맞춰 쉽게 적용할 수 있습니다.