Bundler

번들러란?

한마디로 정리하자면, "의존성이 있는 모듈들을 하나로 합쳐주는 툴" 이라고 생각하면 될 것 같다.

 

우리는 JS 모듈을 사용하려면, HTML에서 <script> 태그로 우리가 작성한 JS 파일을 불러와야 했다.

한 JS 파일만 불러올 경우엔 상관없지만, 여러 JS 파일을 불러올경우엔 난감한 경우가 생길 수도 있다.

 

예를들어 A.js에서 작성한 A라는 모듈이 B.js에서 작성한 B라는 모듈과 관계가 있다고 해보자.

(예를 들면 A에서 B를 참조한다던가 하는 상황)

 

HTML 에선 이런 경우에 어떤 스크립트를 먼저 부르냐, 즉 어떤 스크립트를 부르는 <script> 태그를 먼저쓰냐에 따라 문제가 될 수도 있다. 서로 모듈들이 엮어있는 경우에 아직 선언이 되지않은 것을 참조한다거나 하면 예상치 못한 결과를 초래할 수 있기 때문이다.

 

따라서 번들러는 이런 일이 생기지 않도록 의존성이 있는 모듈들을 한 파일로 묶어서 제공해준다.

 

또한, 우리가 작성한 모듈이 최신 문법을 사용하지만 어떤 브라우저에선 지원하지 않는다고 하면 해당 브라우저가 우리가 구현한 기능을 똑같이 사용할 수 있도록 변환해준다.

 

번들러 종류

번들러의 종류는 많다. 흔히 우리가 React 개발 할 때 사용했던 CRA(Create React App), Vite, Webpack, Rollup, Parcel 등... 이 있지만 이번 포스팅에선 '번들러' 자체에 대한 개념 정리이니 간단히 정리해보고 넘어가보자.

 

Webpack