# [번들러] Webpack 과 Parcel 그리고..next?

# **혼자서는 온전할 수 없는 JS의 운명의 단짝, 번들러**

자바스크립트 환경에서 개발을 하다보면 필연적으로 수없이 많은 모듈화된 파일들을 마주하게 된다.

js, css, scss 등과 같은 개발 관련 파일들과 jpeg와 같은 소스 파일 등 수많은 파일들이 혼재해 있는 여러 모듈들을 하나하나 메인 output이 될 index.html 까지 이상없이 연결시키는 것은 프로젝트의 규모가 커질 수록 여간 어려운 작업이 아니게 된다.

import와 export구문으로 비교적 연결이 쉬워진 모던JS 환경에서도 웹 호환성이라는 난관에 부딪혀 사용자의 웹 브라우징 환경에 따라 제대로 실행이 안되는 상황들이 거듭 발생했다.

이 때 ***의존성이 있는 모듈들을 묶어 하나(혹은 여러개)의 파일들로 만들고, babel과 같은 문법 변환기를 활용해 웹호환성을 높여주는 등의 작업을 한번에 진행하도록 하는 아이디어를 많은 개발자들이 생각했고, 이 아이디어가 곧 Webpack, Parcel, Rollup 등의 번들러로 구현***되었다.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1723122674688/c9a661a9-9679-4e51-b60f-3ceec7d22667.jpeg align="center")

## **오래된 업계 공룡, \[Webpack\]**

웹팩은 2012년도에 출시한 현재 가장 많이 사용되는 번들러이다.

아마 최근처럼 리액트 환경에서 처음 코딩을 시작한 사람들은 세팅을 접해보지 못했을 것 같은데, 가장 많이 사용하는 패키지인 CRA(create-react-app)에 기본으로 설치되어있는 번들러가 바로 Webpack이다.

> Webpack의 ***장점으로는 커뮤니티가 크고 오래된 만큼 수많은 서드파티 플러그인들이 있는 것***이고
> 
> ***단점이라고 한다면 이후 출시된 번들러들보다 상대적으로 느린 처리속도 그리고 번거로운 환경 세팅***이 되겠다.

```javascript
// 웹팩의 초기 환경설정
// webpack.config.js

const path = require('path');

module.exports = {
  // mode 설정_ webpack 4 버전에 생긴 기능
  // mode : production(default) / development / none
  entry: './src/index.js', // 참조할 js파일 (이 entry에 기재된 js파일에 각종 파일들이 import 된다)
  output: {
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js', // 최종적으로 아웃풋되는 js파일 (babel을 통한 트랜스파일링과 같은 번들러의 역할이 수행되고 나온 최종 결과물)
  },
};
```

Webpack은 위와 같은 세팅이 가장 기초적인 세팅이라고 할 수 있다.

이외에도 사용자는

> **Entry (기준이 되는 파일 설정),Output (생성된 번들을 내보낼 위치 및 파일의 이름지정),Loaders (JS와 JSON만을 이해하는 Webpack을 다른 유형의 파일도 인식할 수 있도록 변환),Plugins (Plugin 파일을 로드해 기능을 확장),Mode (환경별 최적화 제공)**

를 이해하고 유연하게 웹팩환경을 설정 가능하다.

## **좀 더 빠르고 간편하게 \[Parcel-Bundler\]**

웹팩 다음으로 유명한 번들러라고 한다면 Parcel-Bundler를 빼놓을 수 없을 것 같다.

***멀티코어 프로세싱으로 불꽃 튀게 빠른 성능*** 이라는 문구를 메인 문구로 사용하고 있는 이 번들러는 주장하길 webpack보다 2배 가량 빠른 속도의 번들링을 제공한다고 한다.

하지만 개인적으로 생각하는 parcel의 가장 큰 장점은 webpack의 귀찮은 초기 설정(webpack.config.js)과 같은 설정이 필요가 없다는 것이다. 단순히 설치하고 터미널을 통해 명령하는 것만으로 대부분의 명령을 실행할 수 있다는 것은 큰 장점으로 다가온다.

그런 이유로 Parcel은 소규모 토이 프로젝트를 진행할 때 사용하기 좋은 번들러라고 볼 수 있다.

다만 이런 장점이 많아보이는 Parcel을 뒤로하고 여전히 Webpack이 더 널리, 그리고 많이 사용되는 이유는 오랜 기간 사용되어 사용 용례가 많고 다양한 Plugin과 Loader의 활용이 가능하다는 장점때문일 것이다.

## **웹팩과 비슷, 하지만 용량의 획기적 절감 \[Rollup\]**

위 파셀과 웹팩의 장점을 섞어둔 번들러가 있었다면 좋았겠지만, Rollup은 웹팩과 유사한 번들러이다.

Webpack과 Parcel의 경우 자체 로더를 통해 commonJS형태(require()형태)로 번들링이 진행되지만, **Rollup의 경우 ES모듈(es6의 import, export)로 번들할 수 있다는 장점**이 있다. 또한 **작동원리에 따라 중복코드가 제거되지 않고 용량이 큰 webpack에 비해 중복코드가 제거되고 자체 용량이 작은 것 또한 Rollup의 장점**이다.

하지만 장점만 있는 것은 세상에 없다. Rollup의 경우 entry(in, out)이 많아질 수록 복잡도가 증가하고 plugin의 설정이 자유롭지 못하다는 단점이 있다.

# **다음 세대의 번들러는..?**

최근 Next.js 13의 컨퍼런스 발표 현장에서 Webpack의 창시자인 Tobias Koppens 주도의 Rust기반 번들러 Turbopack의 발표가 있었다고 한다. JS의 설계상 한계를 Rust 기반으로 만들며 700배 가량 빨라진 속도를 제공한다고 하는데 앞으로 웹환경이 또 어떻게 바뀔 지 기대가 된다.

---

### **참고**

[Webpack 공식사이트](https://webpack.js.org/)

[Parcel 공식사이트](https://ko.parceljs.org/)

[Rollup 공식사이트](https://rollupjs.org/guide/en/)

[3기 심바 블로그 - Webpack 이해하기](https://tecoble.techcourse.co.kr/post/2021-06-30-webpack-intro/)

[Naver FE Platfrom - Webpack에서 Rollup 전환기](https://medium.com/naver-fe-platform/webpack%EC%97%90%EC%84%9C-rollup%EC%A0%84%ED%99%98%EA%B8%B0-137dc45cbc38)

[삔아 벨로그](https://velog.io/@subin1224/Parcel-vs-Rollup-vs-Webpack-%EB%B9%84%EA%B5%90)

[DAN.DEV.LOG 블로그](https://dantechblog.gatsbyjs.io/posts/rollup/)

[Naver FE News](https://github.com/naver/fe-news/blob/master/issues/2022-11.md)