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

Soye Park·2022년 11월 18일
1

기술

목록 보기
5/6
post-thumbnail

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

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

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

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

오래된 업계 공룡, [Webpack]

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

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

// 웹팩의 초기 환경설정
// 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 공식사이트
Parcel 공식사이트
Rollup 공식사이트

3기 심바 블로그 - Webpack 이해하기
Naver FE Platfrom - Webpack에서 Rollup 전환기
삔아 벨로그
DAN.DEV.LOG 블로그
Naver FE News

profile
응애FE개발자/ 블로그 이전 : https://soyeah-log.vercel.app/

0개의 댓글