Webpack 지도

입구에서 의존성을 모아 브라우저가 읽을 결과물을 만든다

입구에서 의존성을 모아 브라우저가 읽을 결과물로 만든다은 Entry, Loader, Plugin를 실제 브라우저 흐름에서 나눠 확인해야 구현 기준과 실패 대응이 흐려지지 않습니다.

01Entry

애플리케이션 시작 파일을 기준으로 그래프를 만듭니다.

02Loader

JS가 아닌 CSS, 이미지, JSX 같은 파일을 변환합니다.

03Plugin

HTML 생성, 환경 변수, 최적화 같은 빌드 작업을 확장합니다.

04Output

번들 파일명과 배포 위치를 결정합니다.

학습 판단

설정이 복잡해질수록 entry, loader, plugin, output 네 축으로 나눠 보면 어디를 고쳐야 하는지 빠르게 찾을 수 있습니다.