Webpack은 모듈 그래프와 산출물 처리를 함께 이해해야 한다
소스 파일의 import 관계와 최종 dist 파일의 chunk·asset 관계는 서로 연결되지만 같은 구조는 아니다.
| 관점 | 보는 대상 | 도구 설정 | 확인 질문 |
|---|---|---|---|
| Source graph | entry와 import 관계 | resolve, alias | 필요한 모듈만 따라가는가 |
| Transform | JS/CSS/이미지 변환 | loader rules | 브라우저가 이해할 형태가 되는가 |
| Chunk graph | 초기 chunk와 lazy chunk | splitChunks, dynamic import | 초기 로딩이 과하지 않은가 |
| Asset output | 파일명, hash, publicPath | output 설정 | 캐시와 배포 경로가 맞는가 |
| Runtime load | 브라우저가 산출물을 불러오는 방식 | HTML, manifest, chunk runtime | 누락된 chunk가 없는가 |
Webpack 설정은 소스 구조와 배포 산출물을 동시에 바꾸므로 두 그래프를 함께 확인해야 한다.