Webpack build

Webpack 번들링은 변환, 분할, 캐시, 배포 경로를 함께 결정한다

빌드 결과가 빠르고 안정적으로 동작하려면 코드 변환뿐 아니라 chunk 분리와 파일명 hash, public path가 맞아야 한다.

결정설정좋은 상태위험 신호
Modedevelopment 또는 production디버그와 최적화가 구분됨운영에 개발 설정 배포
TranspileBabel/TypeScript loader대상 브라우저 문법으로 변환구형 브라우저 문법 오류
Splitdynamic import, splitChunks초기 번들이 작아짐너무 많은 요청 또는 큰 chunk
Cachecontenthash filename변경 파일만 새로 받음새 배포 후 오래된 파일 참조
Deploy pathpublicPath, asset pathCDN/서브 경로에서 정상 로드chunk loading failed

번들링 파이프라인은 개발 편의가 아니라 사용자가 받는 파일의 크기와 갱신 안정성을 결정한다.