웹팩(WebPack)이란?

개념

웹팩(WebPack)은 모듈 번들러(module bundler)로, JavaScript와 관련된 리소스(파일)들을 처리하고 번들로 묶는 도구다. 웹 애플리케이션 개발 시 많은 리소스 파일들이 사용되는데, 웹팩은 이러한 리소스들을 하나의 번들 파일로 생성하여 성능을 향상시키고 유지보수를 용이하게 한다.

 

 

웹팩의 주요 특징과 기능

1. 모듈 번들링: 웹팩은 JavaScript 파일뿐만 아니라 CSS, 이미지, 폰트 등 모든 유형의 파일을 모듈로 취급하고, 이들 간의 의존성을 분석하고 필요한 리소스를 번들로 묶는다.

2. 로더(Loader) 사용: 웹팩은 로더를 통해 다양한 유형의 파일을 처리하고 로더는 리소스를 가져오고 변환하여 번들에 포함시킨다.

 

Babel 로더	최신 JavaScript 문법을 이전 버전으로 변환
CSS 로더	CSS 파일을 모듈로 가져와 웹 애플리케이션에 적용
이미지 로더	이미지 파일을 모듈로 가져와 사용
파일 로더	기타 파일을 모듈로 가져와 사용

3. 플러그인(Plugin) 확장: 웹팩은 다양한 플러그인을 제공하여 번들링 과정을 확장, 플러그인을 사용하면 번들 파일의 최적화, 환경 변수 주입, 번들 결과 분석 등 다양한 작업을 수행.

 

4. 개발 및 프로덕션 모드: 웹팩은 개발 환경과 프로덕션 환경에 따라 다른 설정을 제공, 개발 모드에서는 개발을 보조하는 기능을 포함하고, 프로덕션 모드에서는 최적화된 번들 파일을 생성.

5. 코드 스플리팅(Code Splitting): 웹팩은 코드 스플리팅을 지원하여 애플리케이션의 초기 로딩 속도를 향상시키고 필요한 모듈들만 요청하여 동적으로 로딩할 수 있도록 해준다.

 

6. 개발 서버: 웹팩 개발 서버를 사용하면 변경 사항을 실시간으로 감지하고 자동으로 다시 빌드하여 브라우저를 새로고침하지 않아도 개발 중인 애플리케이션을 볼 수 있다.

 

7. 모듈 해석: 웹팩은 모듈을 해석하기 위해 resolve 옵션을 제공, 이를 통해 모듈을 어떻게 해석할지 설정할 수 있다. 예를 들어, 파일 확장자를 생략하거나 특정 경로를 기본으로 설정할 수 있다.

8. 자산 관리(Asset Management): 웹팩은 모듈 시스템을 통해 CSS, 이미지 등의 자산을 관리할 수 있다. 이를 통해 필요한 자산을 적절한 위치에 배치하고 번들에 포함시킬 수 있다.

9. 환경 변수 주입: 웹팩은 환경 변수를 주입하여 번들링 시에 동적으로 설정, 개발 환경과 프로덕션 환경에 따라 다른 설정을 적용하거나, 환경 변수를 활용하여 조건부로 모듈을 로드한다.

10. 번들 최적화: 웹팩은 번들 파일의 최적화를 지원한다. 여러 개의 모듈이 포함된 번들을 작게 만들고 성능을 향상시키기 위해 코드 압축, 트리 쉐이킹(Tree Shaking), 코드 분할 등의 최적화 기법을 적용한다.

11. 다국어 지원: 웹팩은 다국어 지원을 위한 기능을 제공, 번들에 포함되는 텍스트 리소스를 다국어로 분리하여 관리하고, 필요한 언어의 리소스만 동적으로 로딩할 수 있다.

12. 테스팅(Test): 웹팩은 테스팅을 위한 환경을 구성하는 기능을 제공, 테스트 프레임워크와 함께 사용하여 자동화된 테스트 환경을 구축할 수 있다.

 

 

웹팩의 동작 과정

1. 엔트리 포인트: 웹팩은 애플리케이션의 시작점을 정해야 하는데 이를 엔트리 포인트라고 부른다. 엔트리 포인트는 일반적으로 자바스크립트 파일이다.

2. 의존성 해석: 엔트리 포인트를 기준으로 웹팩은 필요한 다른 파일들과의 의존 관계를 분석한다. 이 파일들은 여러 개의 모듈로 구성될 수 있다.

3. 로더 적용: 웹팩은 각 모듈을 처리하기 전에 로더를 사용하여 변환. 예를 들어, CSS 파일을 자바스크립트로 변환하거나, 최신 자바스크립트 문법을 구형 브라우저에서 동작할 수 있는 문법으로 변환할 수 있다.

4. 플러그인 적용: 로더가 모듈을 변환하는 데 사용되는 것과 달리, 플러그인은 번들링된 결과물에 추가적인 작업을 수행한다. 예를 들어, 번들 파일의 크기를 줄이는 최적화 작업이나 환경 변수 설정과 같은 작업을 할 수 있다.

5. 번들 생성: 웹팩은 의존성 그래프를 기반으로 모든 모듈을 하나로 묶어 번들 파일을 생성한다. 이 파일은 브라우저에서 실행될 수 있는 자바스크립트 파일이다.

6. 번들 최적화: 번들 파일은 크기가 크고 성능에 영향을 줄 수 있다. 웹팩은 번들 최적화를 통해 번들의 크기를 최소화하고 실행 속도를 향상시킨다.

7. 결과물 출력: 번들 최적화가 완료되면 웹팩은 최종 번들 파일을 설정된 경로에 저장한다. 이 파일은 웹 애플리케이션을 실행하는 데 필요한 파일로 사용된다.

 

결론

=> 이렇게 웹팩을 사용하면 여러 개의 파일을 하나로 묶어서 애플리케이션을 개발하고 배포하는 과정을 편리하게 할 수 있다.