webpack은 최신 웹 애플리케이션 개발에서 널리 사용되는 모듈 번들러(module bundler) 입니다.

주요 역할

• 여러 개의 자바스크립트, CSS, 이미지, 폰트 등 다양한 리소스 파일을 하나 또는 여러 개의 번들 파일로 묶어줍니다.
• ES6 모듈(import/export), CommonJS(require/module.exports) 등 다양한 모듈 시스템을 지원합니다.
• 트리 쉐이킹, 코드 스플리팅, 압축 등 최적화 기능을 제공합니다.

왜 필요한가요?

• 웹 프로젝트가 커질수록 파일이 많아지고, 의존성 관리가 복잡해집니다.
• webpack은 이러한 파일들을 효율적으로 관리하고, 브라우저에 최적화된 형태로 배포할 수 있게 도와줍니다.

어떻게 동작하나요?

1. 엔트리(Entry): 어디서부터 번들링을 시작할지 지정합니다.
2. 로더(Loader): JS 외에도 SCSS, 이미지 등 다양한 파일을 처리할 수 있게 해줍니다.
3. 플러그인(Plugin): 번들 최적화, 파일 추출, 복사 등 다양한 추가 작업을 지원합니다.
4. 출력(Output): 번들 파일이 어디에, 어떤 이름으로 저장될지 지정합니다.

webpack은 여러 소스 파일을 효율적으로 관리하고, 최적화된 번들 파일로 만들어주는 도구입니다.
대규모 프론트엔드 프로젝트에서 거의 필수적으로 사용됩니다.