번들러(Bundler)(1)

프론트 개발을 하다보면 Webpack, RollUp, Parcle 를 굉장히 많이 들어보게 된다.
기타 라이브러리(예:React)나 프레임워크들(예:Vue)을 웹이 동작할 수 있도록 변환시켜주는 역할을 한다는 전체적인 의미만 알고 있었다.
이번에 좀 더 디테일하고 정확하게 짚고 넘어갈 수 있도록 작성하면서 공부하려고 한다.

Bundelr란?

대표적으로 Parcel, Webpack RollUp을 번들러로 사용한다.
HTML, CSS, JS가 웹동작을 하게 하는 언어인데 저 세가지 언어로만 웹 구성을 코딩할 수 없기때문에 다른 라이브러리나 프레임워크등의 다양한 기능으로 코딩한다.
Vue, React, Scss, TS, React와 같은 기능을 HTML,CSS,JS로 변환하여 웹동작을 할 수 있도록 하는 것이 번들러이다.
즉, 자동적으로 변환시켜주는 기능인 것이 아니라, 각각의 외부패키지의 설치하여 변환하고 변환된 모든 모듈들을 그룹핑하여 하나로 묶어 웹동작을 할 수 있도록 돕는 것이다.

Parcel Bundler

1) npm init -y
// 개발 의존성 패키지로 parcel-bundler 설치
2) npm i -D parcel-bundler
// sciprt 수정
3)
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },