Webpack Module Federation 도입 전에 알아야 할 것들

Webpack 5에서 도입된 Module Federation을 처음 접하는 개발자를 위해 정확한 용어 정의와 동작 원리를 먼저 짚어주는 카카오엔터테인먼트 FE 팀의 글이다. 아이언맨 헐크버스터를 비유로 여러 앱을 독립 빌드 후 런타임에 통합하는 개념을 설명하고, remoteEntry.js 중심의 실제 로딩 흐름과 주의해야 할 제약 사항을 코드로 풀어낸다.

핵심 포인트

Module Federation은 여러 Webpack 빌드 결과물을 런타임에 동적 로딩해 하나의 앱처럼 동작시키는 기능, 마이크로 프론트엔드 런타임 통합을 가능하게 함
기존 모노레포 빌드타임 통합은 변경이 없는 패키지도 함께 빌드해야 했던 한계, Module Federation은 변경된 컨테이너만 독립 빌드·배포
핵심 용어: 로컬 모듈(단일 빌드 내), 원격 모듈(다른 빌드에서 런타임 로딩), 컨테이너(각 빌드), Expose(내보낼 모듈 목록), 공유 모듈(react 등 중복 로딩 방지)
리모트 앱이 노출한 원격 모듈을 호스트 앱이 remoteEntry.js를 통해 비동기 로딩, 전역 변수(app2 등)로 컨테이너 참조
공유 모듈 설정(singleton: true)으로 react·react-dom 등이 여러 컨테이너에서 중복 로딩되지 않도록 제어 가능
빌드 시간, 영향 범위, 배포 후 브라우저 캐시 효율이 모두 기존 방식 대비 개선되지만, 원격 모듈 인터페이스 변경 시 호스트 앱도 검증 필요

상세 정리

Webpack 5 Module Federation은 2020년경 출시, 마이크로 프론트엔드의 빌드타임 통합 한계를 런타임 통합으로 해결
로컬 모듈: 단일 Webpack 빌드에 포함된 모듈, 해당 빌드 안에서만 로딩 가능
원격 모듈: 다른 Webpack 빌드의 결과물을 런타임에 Dynamic Import처럼 로딩하는 모듈
컨테이너(Container): 하나의 빌드이자 하나의 웹 애플리케이션, 상호 순환 참조도 기술적으로 가능
Expose 설정: ModuleFederationPlugin({ exposes: { "./Button": "./src/Button" } })으로 원격 노출할 로컬 모듈 선언
Remotes 설정: ModuleFederationPlugin({ remotes: { app2: "app2@http://localhost:3002/remoteEntry.js" } })로 원격 컨테이너 참조
공유 모듈: shared: { react: { singleton: true } }로 여러 컨테이너가 동일 버전 react를 한 번만 로딩하도록 강제
remoteEntry.js: 리모트 앱 빌드 시 생성, moduleMap으로 Expose한 원격 모듈 경로 매핑 포함
호스트 앱 로딩 흐름: 전역변수 app2 확인 → 없으면 remoteEntry.js 로딩 → 전역변수 설정 → 컨테이너 resolve
기대 효과 비교: 빌드 범위(변경된 컨테이너만), 영향도 검증(해당 컨테이너로 국한), 배포 직후 로딩 시간(변경 컨테이너 원격 모듈만 새로 로딩)
현재 불편한 점: 아직 완성도 측면에서 개선이 필요한 부분 존재, 도입 전 충분한 사전 검토 권장

왜 읽나Module Federation을 막연히 들어봤거나 도입을 검토 중인 FE 개발자가 용어 혼선 없이 동작 원리와 실제 설정 흐름을 코드로 파악할 수 있다.

카카오 엔터테인먼트 FE 블로그

원문은 여기서 이어서 읽을 수 있어요

원문 읽기

읽음 (0)

·takedown 요청

Webpack Module Federation 도입 전에 알아야 할 것들

이 글과 비슷한

토스는 어떻게 광고 속에 게임을 넣었을까

RxJS로 우아하게 사이드 이펙트 통제하기

항공 프론트엔드 구축기 (7/10): 창구를 하나만 두었습니다