Webpack 처리 흐름

Webpack 의존성 그래프

Webpack을 번들러라는 한 단어로만 보면 빌드 실패를 찾기 어렵다. entry에서 시작한 import 그래프를 따라 module을 만들고, loader가 파일을 JS가 이해할 형태로 바꾸며, plugin이 최적화와 산출물 생성을 확장한다.

01

Entry 시작

애플리케이션 진입점에서 import를 따라 의존성 그래프를 만든다.

entry가 많으면 chunk 전략도 달라진다
02

Module 변환

JS가 아닌 CSS, image, TypeScript 같은 파일을 loader가 처리한다.

loader 순서는 오른쪽에서 왼쪽으로 읽는다
03

Plugin 개입

HTML 생성, 환경 변수 주입, 압축, 분석 같은 작업을 plugin hook으로 실행한다.

loader는 파일 단위, plugin은 빌드 전반에 가깝다
04

Chunk 분리

dynamic import, vendor split, runtime chunk로 브라우저가 받을 파일을 나눈다.

쪼개기만 한다고 항상 빠르지 않다
05

디버깅 산출

sourcemap, stats, cache 로그로 빌드 실패와 번들 크기 문제를 확인한다.

production 설정에서 다시 확인한다
Loader
파일 변환 TypeScript, CSS, asset 파일을 모듈 그래프에 넣을 수 있게 바꾼다.
순서와 include 범위를 본다
Plugin
빌드 확장 최적화, HTML, define, extraction처럼 전체 빌드 흐름에 개입한다.
hook 실행 시점을 확인한다
Chunk
브라우저 전송 단위 초기 로드와 lazy load의 균형을 맞춘다.
청크 누락은 런타임 오류가 된다
Sourcemap
디버깅 정보 개발 편의와 운영 코드 노출 위험을 함께 판단한다.
배포 환경별 정책을 둔다

빌드 확인

loader 범위 새 파일 확장자가 올바른 loader와 include 경로에 들어가는지 확인한다.
chunk 오류 동적 import 페이지를 직접 열어 청크 404가 없는지 본다.
stats 분석 큰 번들과 중복 의존성을 stats나 analyzer로 확인한다.