프론트엔드
Webpack Module Federation 도입 전에 알아야 할 것들
두줄요약
Webpack Module Federation의 원격 모듈 통합 원리와 핵심 용어를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.
구조와 흐름
- Webpack 5의 Module Federation으로 독립 빌드 결과물을 런타임에 통합하는 마이크로 프런트엔드 방식
- 리모트 앱의 Expose 모듈을 호스트 앱에서
import("app2/Button")형태로 비동기 로딩 remoteEntry.js로딩, 전역 컨테이너 변수 확인, moduleMap·청크 기반 원격 모듈 제공 흐름
선택 이유
- 변경된 컨테이너만 개별 빌드·배포하는 방식으로 빌드 및 배포 범위 축소
- 컨테이너 단위 영향도 검증과 배포 직후 원격 모듈 재로딩 범위 제한
react,react-dom등 공유 모듈의 런타임 단일 로딩 지원
주의할 점
- 전역 변수로 사용되는 컨테이너 이름의 전역 유니크성 필요
- 원격 모듈 목록·타입 파악 어려움과 별도
*.d.ts타입 정의 필요성 - 환경별
remoteEntry.jsURL 차이에 따른 Webpack 설정 또는 환경 변수 관리 필요
적용해볼 점
- 원격 모듈 인터페이스 변경 시 호스트 앱까지 포함한 검증 범위 설정
- Monorepo 활용을 통한 리모트 앱 모듈 탐색 편의성 검토
