Bundler

1. 번들러 개념

웹사이트에서는 HTML, CSS, JavaScript가 동작한다.
그러나 순수하게 세 가지만을 사용하여 코딩을 하기엔 비효율적인 부분이 존재한다. 많은 개발자들은 SCSS, React, TypeScript 등 여러 라이브러리나 프레임워크를 사용하여 코딩을 하고 프로젝트를 제작한다. 하지만 이 기능들이 웹에서 직접적으로 동작하지 않는다.

따라서, 번들러를 통해 변환하는 과정을 거쳐 HTMl, CSS, JavaScript로 바꿔서 웹에서 동작시킬 수 있도록 한다.

물론, 번들러 자체가 모든 것을 바꿔 줄 수 있는 역할을 하는 것은 아니다. 번들러는 외부의 패키지의 도움을 받아서 변환을 할 수 있다. (예: SCSS 문법을 CSS로 변환시킬 때 parcel-bundler가 Sass라는 외부 패키지를 설치한 것)

2. 번들러 비교

parcel

• 별도의 구성이 없는 단순한 자동 번들링
• 매우 편리한 번들러
• 그러나 webpack 번들러에 비해 구성이 꼼꼼하지 않다.
• 이러한 이유로 parcel 번들러는 소/중형 프로젝트에 적합

webpack

• 꼼꼼하고 자세하게 번들링할 수 있는 구성 옵션을 설정
• 구성 옵션을 통해 개발자의 입맛에 맞게 정리를 할 수 있다.
• 중/대형 프로젝트에 유용하게 사용 가능
• 디테일때문에 확인해야 할 사항이 많다는 단점 존재