브라우저에서 실행할 자바스크립트와 자원을 하나로 묶어 초기 로딩을 줄이는 도구
수많은 모듈 파일을 하나로 묶어 브라우저가 빠르게 로드할 수 있게 만듭니다. 자바스크립트뿐 아니라 CSS, 이미지, JSON 등 다양한 리소스를 변환하고 패키징하는 도구입니다. 초기 로딩 시간을 줄이고 개발 환경을 유연하게 구성하는 데 쓰입니다.
모듈 형식 통합과 코드 분할
ES Modules, CommonJS, AMD 모듈을 함께 사용할 수 있습니다. 컴파일 시점에 의존성을 해결하여 런타임 크기를 줄입니다. 코드를 여러 청크로 나누어 필요할 때 비동기로 로드할 수 있어 초기 로딩 시간을 단축합니다. 정적 분석을 통해 기존 라이브러리를 대부분 그대로 지원합니다.
로더와 플러그인 시스템
로더를 사용해 컴파일 중 파일을 전처리합니다.
- 전처리 Babel을 이용해 ES2015+ 코드를 ES5로 변환하거나 TypeScript, CoffeeScript를 처리합니다.
- 스타일링 LESS, Sass/SCSS, Stylus, PostCSS를 지원하여 스타일 시트를 컴파일합니다.
- 프레임워크 Vue, Angular, Svelte, Riot 등 주요 프레임워크의 컴포넌트를 로드합니다.
성능 최적화와 캐싱
비동기 I/O와 다단계 캐싱을 사용하여 컴파일 속도를 높입니다. 특히 증분 컴파일 시 빠른 처리가 가능합니다. 자주 사용되는 모듈을 중복 제거하고 미니파잉을 적용해 출력 크기를 줄입니다. 해시를 사용해 캐시 친화적인 청크를 생성합니다.
설치와 브라우저 지원 범위
npm 또는 yarn으로 설치할 수 있습니다. npm install --save-dev webpack 명령을 사용합니다. ES5를 지원하는 모든 브라우저를 대상으로 하며 IE8 이하는 지원하지 않습니다. import()와 require.ensure()를 사용하려면 Promise가 필요하므로 구형 브라우저에서는 폴리필이 필요합니다.
도입 전 확인 사항
webpack은 저수준 도구로 유연성이 높지만 초보자에게는 진입 장벽이 있을 수 있습니다. 복잡한 설정이 필요할 수 있으므로 공식 문서의 개념 페이지를 먼저 살펴보는 것이 좋습니다. 프로젝트의 규모와 요구 사항에 따라 플러그인 선택이 달라질 수 있습니다. 최신 버전의 호환성과 지원 범위를 확인한 후 도입을 결정해야 합니다.
