[JS Bundler][Ch1][Parcel] 번들러 개요

다양한 기능을 가진 패키지(Sass, React, TypeScript 등...)를 통해서 프로젝트를 제작할 수 있고

그것들을 번들러를 통해서 처리할 때 필요한 외부 패키지들을 연결해주면

실제로 HTML/CSS/JavaScript로 변환되어 웹에서 동작한다.

번들러(Bundler)

소프트웨어 및 하드웨어와 작동하는데 필요한 여러 개의 파일을 하나의 파일로 묶은 패키지

프로그래밍적으로 접근하자면 필요한 의존성에 대해 추적하여 해당하는 의존성들을 그룹핑해주는 도구라고 할 수 있다.

 

단순히 자바스크립트 파일들 뿐만 아니라, 

애플리케이션에 필요한 모든 종류의 파일들을 모듈 단위로 나누어 최소한의 파일 묶음(번들)으로 만들어 낸다.

 

또한, 자바스크립트 파일을 외부에서 알아보기 힘들게 코드를 변환하는 작업(Uglyfy)을 한다거나,

최신 문법의 자바스크립트를 모든 웹 브라우저에서 작동할 수 있게 ES5문법으로 변환(Transpile)하는 등 다양한 기능을 지원한다.

 

대표적으로 Webpack, Parcel, Rollup, Browserify등이 있다.

모듈 번들러

웹 애플리케이션을 동작시키기 위한 서로 연관 관계가 있는 웹 구성 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이들의 의존성을 묶고 조합해서 합쳐진 하나의 결과물(static한 자원)을 만드는 도구