Webpack Module Federation 도입 전에 알아야 할 것들
프론트엔드
Webpack Module Federation 도입 전에 알아야 할 것들
두줄요약
Webpack Module Federation의 원격 모듈 로딩 구조와 컨테이너 구성 요소를 설명했습니다. 독립 배포의 장점과 타입·환경별 경로 관리의 제약을 함께 짚었습니다.
구조와 흐름
- 리모트 앱이
exposes로 원격 모듈을 노출하고 호스트 앱이remotes로 참조하는 구성 remoteEntry.js로딩 후 전역 컨테이너 변수와 모듈 맵을 통해 원격 청크 요청shared설정으로 React·react-dom 같은 공용 모듈의 런타임 단일 로딩
선택 이유
- 컨테이너별 독립 빌드·검증·배포를 통한 변경 범위와 배포 시간 축소
- 다른 도메인에 배포된 모듈의 비동기 로딩과 코드 분할 지원
- 모노레포 기반 빌드타임 통합의 전체 동시 빌드 한계 보완
주의할 점
- 컨테이너 이름의 전역 스코프 유일성 필요
- 원격 모듈 목록과 타입 파악의 어려움, 별도 타입 정의 파일 필요
- 환경별
remoteEntry.jsURL 차이에 따른 Webpack 설정 또는 환경 변수 관리 필요
적용해볼 점
- 원격 모듈 인터페이스 변경 시 호스트 앱까지 검증 범위 확장
- 컨테이너별 배포 환경에 맞춘 원격 엔트리 URL 구성
