[자바스크립트] 웹팩이란?

웹팩(Webpack)은 자바스크립트(JS) 애플리케이션을 위한 정적 모듈 번들러입니다. 웹 애플리케이션을 구성하는 자원(HTML, CSS, 이미지, JS 파일 등)을 모두 모듈로 보고, 이러한 모듈들을 의존성 그래프로 만들어 하나 또는 여러 개의 번들로 결합하는 도구입니다. 웹팩을 사용함으로써 개발자는 애플리케이션을 모듈 방식으로 구성할 수 있고, 최종적으로 브라우저에서 사용할 수 있는 형태로 자원들을 번들링할 수 있습니다.

웹팩의 주요 기능은 다음과 같습니다:

1. 로더(Loaders): 웹팩은 오직 자바스크립트와 JSON 파일만 이해할 수 있습니다. 로더를 사용하면 웹팩이 다른 타입의 파일들을 처리하여 모듈로 변환할 수 있게 합니다. 예를 들어, CSS, 이미지, HTML 파일들을 자바스크립트 모듈로 변환할 수 있습니다.
2. 플러그인(Plugins): 로더가 파일 단위로 작업을 처리한다면, 플러그인은 번들 단위로 작업을 처리합니다. 플러그인을 사용하여 번들 최적화, 자산 관리, 환경 변수 주입 등 다양한 작업을 수행할 수 있습니다.
3. 모듈(Module): 웹팩에서 모듈은 웹 애플리케이션을 구성하는 기본 단위입니다. 자바스크립트 파일 외에도 CSS, 이미지, 폰트 등 웹팩이 이해할 수 있게 변환된 모든 파일도 모듈로 간주됩니다.
4. 엔트리(Entry): 엔트리는 웹팩이 어떤 모듈을 사용하여 의존성 그래프를 시작할 것인지를 알려주는 지점입니다. 기본적으로 ./src/index.js가 엔트리 포인트로 설정되어 있지만, 설정을 통해 변경할 수 있습니다.
5. 아웃풋(Output): 아웃풋은 웹팩이 생성한 번들을 어디에 배치할 것인지를 정의합니다. 기본적으로 ./dist/main.js에 결과물이 생성되지만, 이 또한 설정을 통해 변경할 수 있습니다.

웹팩은 모던 프론트엔드 개발에서 중요한 역할을 하며, 특히 SPA(Single Page Application)나 대규모 프로젝트에서 자원을 효율적으로 관리하고 최적화하는 데 필수적인 도구입니다.