Webpack은 entry에서 시작해 의존성 그래프를 만들고 bundle을 낸다
모듈 import를 따라가며 JS, CSS, 이미지 같은 자원을 그래프에 넣고 loader와 plugin으로 처리한다.
| 구성 | 역할 | 예시 | 문제 신호 |
|---|---|---|---|
| Entry | 그래프의 시작점 | src/main.js | 실제 앱 진입점과 다름 |
| Dependency Graph | import 관계를 따라 모듈 연결 | JS, CSS, asset imports | 순환·중복 의존성 증가 |
| Loader | 파일을 모듈로 변환 | babel-loader, css-loader | 파일 형식을 처리하지 못함 |
| Plugin | 번들 과정 확장 | HTML 생성, 환경 변수, 압축 | 빌드 산출물이 기대와 다름 |
| Output | 브라우저가 받을 파일 생성 | bundle, chunk, asset | 캐시와 파일명 전략 누락 |
Webpack은 파일을 단순히 합치는 도구가 아니라 의존성 그래프를 처리해 브라우저용 산출물을 만드는 도구다.