Webpack 흐름

entry에서 브라우저 실행 파일까지

Webpack 설정은 흩어진 옵션처럼 보이지만, 실제 빌드에서는 시작점, 의존성 그래프, 변환, 확장, 출력 단계로 차례대로 연결됩니다.

1

Entry

entry

빌드를 시작할 JavaScript 파일을 지정합니다.

2

Dependency graph

import

entry에서 이어지는 모듈과 에셋 의존성을 추적합니다.

3

Loaders

module.rules

CSS, 이미지, JSX 같은 파일을 번들 가능한 모듈로 변환합니다.

4

Plugins

plugins

HTML 생성, CSS 추출, 환경 변수 주입처럼 빌드 전반을 확장합니다.

5

Output

dist

mode와 dev-server 설정을 반영해 실행 가능한 번들을 만듭니다.

실행 환경 옵션

mode

development는 빠른 피드백, production은 최적화에 맞춥니다.

output

파일 이름과 저장 위치를 정해 배포 결과물을 구성합니다.

devServer

로컬 서버와 HMR로 수정 내용을 빠르게 확인합니다.