Bundler

1. 번들러란?

이번에는 번들러(Bundler)에 대해 알아보는 시간을 가져봅시다. 지금까지 parcel 번들러를 사용해왔으며 이외에도 webpack, rollup 등의 여러 종류가 있습니다. 특히, webpack 번들러가 많이 사용되고 있습니다.

2. 번들러의 개념

실제로 웹사이트에서는 HTML, CSS, JavaScript가 동작을 합니다. 그러나 순수하게 3가지만을 사용하여 코딩을 하기엔 비효율적이라 할 수 있습니다.

그렇기 때문에 SCSS, React, TypeScript 등의 여러 라이브러리나 프레임워크를 사용하여 코딩을 진행하고 프로젝트를 제작합니다. 그리고 이들을 번들러를 통해 변환하는 과정을 거쳐 HTMl, CSS, JavaScript로 웹에서 동작시킬 수 있도록 합니다.

물론, 번들러가 직접적으로 변환시키는 것은 아닙니다. 예를 들어, SCSS 문법을 CSS로 변환시킬 때 parcel-bundler가 Sass라는 외부 패키지를 설치하여 이로부터 도움을 받아 완료한 것입니다.

3. parcel VS webpack

3.1 parcel

parcel 번들러는 별도의 구성이 없는 단순한 자동 번들링을 제공해줍니다. 그러므로 매우 편리한 번들러라고 할 수 있습니다. 그러나 webpack 번들러에 비해 구성이 꼼꼼하지 않습니다. 그러므로 프로젝트의 규모가 커질수록 parcel 번들러의 아쉬움을 발견하는 경우가 있습니다. 이러한 이유로 parcel 번들러는 소/중형 프로젝트에 적합하다고 할 수 있습니다.

3.2 webpack

webpack 번들러는 매우 꼼꼼하고 자세하게 번들링할 수 있는 구성 옵션을 설정해줄 수 있습니다. 그러한 구성 옵션을 통해 개발자의 입맛에 맞게 정리를 할 수 있습니다. 그러므로 당연하게도 중/대형 프로젝트에 유용하게 사용 가능합니다. 그러나 아무래도 이러한 이유로 확인해야할 사항이 많다는 단점이 있습니다.