Web Basic · Webpack

Webpack을 모듈 그래프와 산출물 처리로 이해하기

Webpack은 파일을 합치는 도구가 아니라, entry에서 시작한 모듈 그래프를 loader와 plugin으로 처리해 브라우저용 산출물을 만드는 빌드 시스템이다.

01

그래프 탐색

entry 파일에서 import를 따라가며 필요한 모듈을 수집한다.

02

파일 변환

TypeScript, CSS, 이미지 같은 파일은 loader 규칙을 통과한다.

03

청크 분리

초기 로드와 지연 로드 기준으로 공통 코드와 route 코드를 나눈다.

04

산출물

contenthash, source map, asset 경로가 포함된 파일을 생성한다.

loader
변환 체인 babel-loader, css-loader, asset module
적용 순서 중요
plugin
빌드 제어 HTML 생성, CSS 추출, define 값 주입
환경별 설정 분리
chunk
전송 단위 vendor, route, async import 기준 분리
너무 잘게 쪼개도 비용
analyzer
크기 점검 큰 의존성과 중복 모듈 확인
최적화 근거

캐시 · source map · tree shaking 점검

캐시 contenthash로 바뀐 파일만 새로 받는다.
source map 운영 공개 여부를 의도적으로 결정한다.
tree shaking sideEffects 설정이 최적화를 막지 않는다.
크기 초기 chunk가 과도하게 커지지 않는다.