Webpack 소개

Webpack은 모던 JavaScript 애플리케이션을 위한 **정적 모듈 번들러(Static Module Bundler)**입니다. 애플리케이션이 빌드될 때 Webpack은 내부적으로 종속성 그래프(Dependency Graph)를 구축하며, 프로젝트에 필요한 모든 모듈을 하나 이상의 번들(Bundle) 파일로 결합합니다.

Webpack의 핵심 개념

• Entry(엔트리): Webpack이 내부의 디펜던시 그래프를 생성하기 위해 사용해야 하는 진입점입니다.
• Output(출력): 생성된 번들을 어디로 내보낼지, 그리고 이 파일의 이름을 어떻게 지정할지 설정합니다.
• Loaders(로더): Webpack은 기본적으로 JavaScript와 JSON 파일만 이해합니다. 로더는 Webpack이 다른 유형의 파일을 처리하거나, 그 파일들을 유효한 모듈로 변환할 수 있도록 합니다.
• Plugins(플러그인): 로더가 특정 유형의 모듈을 변환하는 데 사용된다면, 플러그인은 번들 최적화, 애셋 관리 및 환경 변수 주입 등 광범위한 작업을 수행하는 데 활용됩니다.
• Mode(모드): development, production, 또는 none을 설정하여 Webpack에 내장된 환경별 최적화를 활성화할 수 있습니다.

왜 Webpack을 사용하는가?

• 여러 개의 스크립트 파일을 하나로 묶어 네트워크 요청 수를 줄입니다.
• 최신 JavaScript(ES6+)를 이전 브라우저에서도 실행 가능하도록 트랜스파일링(Babel 등 연동)을 쉽게 적용할 수 있습니다.
• CSS, 이미지 폰트 등 정적 애셋도 모듈처럼 쉽게 관리할 수 있습니다.
• Hot Module Replacement(HMR)와 같은 강력한 개발 환경 기능을 제공합니다.