Webpack 빌드 흐름

의존성 그래프를 배포 파일로 바꾸기

Webpack은 entry에서 시작해 모듈 관계를 찾고, loader와 plugin을 거쳐 브라우저가 바로 해석할 결과물을 만듭니다.

entry → dist
Entry

시작 파일 지정

src/index.js에서 import 관계를 따라 전체 그래프를 만듭니다.

Loader

파일 변환

JSX, CSS, 이미지, 폰트를 모듈처럼 읽을 수 있게 규칙별로 처리합니다.

Plugin

빌드 점검

HTML 생성, CSS 추출, 파일 정리처럼 전체 빌드 단계의 작업을 맡깁니다.

Mode

목표별 최적화

개발은 빠른 피드백, 배포는 압축과 트리 쉐이킹 중심으로 실행합니다.

개발 서버

webpack serve로 HMR과 화면 반영 속도를 확인합니다.

배포 결과

dist 안의 HTML, 번들, 에셋 경로가 설정과 맞는지 봅니다.

성능 확인

분할된 청크와 압축 결과가 초기 로드 목표를 만족하는지 점검합니다.

문제가 파일별로 터질 때 loader의 test, exclude, use 순서를 먼저 확인합니다.
결과물이 이상할 때 output 경로, HtmlWebpackPlugin, CSS 추출 설정을 함께 봅니다.