[출처]
모듈 번들러는 JavaScript 코드의 여러 파일을 하나의 파일로 구성하고 결합하는 방법이다. 프로젝트가 단일 파일에 비해 너무 커지거나 여러 종속성이 있는 라이브러리로 작업할 때 JavaScript 번들러를 사용할 수 있다.
번들러는 많은 JavaScript 코드 파일을 브라우저에서 프로덕션 준비가 된 단일 파일로 결합하는 개발 도구이다.
번들러의 멋진 기능은 첫 번째 코드 파일을 통과할 때 종속성 그래프를 생성한다는 것이다. → 지정한 진입점부터 모듈 번들러가 소스 파일의 종속성과 타사 종속성을 모두 추적함을 의미.
이 종속성 그래프는 모든 소스 및 관련 코드 파일이 오류 없이 최신 상태로 유지되도록 보장한다.
번들러가 없던 시절에는 모든 파일과 해당 종속성을 최신 상태로 유지하고 준비하는 것은 꽤나 힘든 작업이었다.
그러나 번들러를 사용하면 파일과 해당 종속성이 단일 파일로 병합된다.
복잡한 작업을 중 일부를 만들기 위해 사용자 지정 또는 타사 라이브러리를 사용할 가능성이 크다. 이 경우 JavaScript 모듈 번들러 없이 개발하면 모든 종속성을 최신 버전으로 업데이트하는 것이 중요한 프로세스가 된다.
종속성의 고통을 덜어주는 일관된 환경을 제공하는 것 외에도 많은 인기 있는 모듈 번들러는 성능 최적화 기능이 함께 제공된다. 코드 분할 및 핫 모듈 교체 등 이러한 기능이 예이다. JavaScript 번들러에는 강력한 오류 로깅과 같은 생산성 향상 기능이 있어 개발자가 쉽게 오류를 디버깅하고 수정할 수 있다.
전반적으로 번들러의 작업은 종속성 그래프 생성과 최종 번들링의 두 단계로 나뉜다.
모듈 번들러가 하는 첫 번째 일은 제공되는 모든 파일의 관계 맵을 생성하는 것이다. 이 프로세스를 종속성 해결이라고 합니다. 이 프로세스를 종속성 해결이라고 합니다. 이렇게 하려면 번들러에 이상적으로 기본 파일이어야 하는 항목 파일이 필요하다. 그런 다음 이 항목 파일을 통해 구분 분석하여 종속성을 이해한다.
그 이후 종속성을 순회하며 이러한 종속성의 종속성을 결정한다. 이 프로세스 전체에서 보는 각 파일에 고유한 ID를 할당한다. 마지막으로 모든 종속성을 추출하고 모든 파일 간의 관계를 나타내는 종속성 그래프를 생성합니다.