이 글은 parcel v1을 다루고 있습니다. v2는 여기에서 확인해주세요.

공식 가이드 주소
오오... 무려 한글 번역이 되어있다!

설치

전역 설치

yarn global add parcel-bundler 를 이용해 전역설치를 하도록 하고있다.

프로젝트 설치

yarn add --dev parcel-bundler 를 이용해 데브패키지로 설치 후 package.json 의 scripts 에 명령어를 추가한다.

"scripts": {
  "dev": "npx parcel src/index.html",
  "build": "npx parcel build src/index.html"
}

굳이 npx 를 붙인 이유는 yarn berry를 사용하는 경우에 저걸 써야 작동한다.

실행

어? 이게 끝? 데브서버가 실행됨과 동시에 dist 폴더가 생성되고 안에 빌드되었다.
이렇게 간단하다고?

빌드

어? 이게 끝?
dist 에 빌드 된 파일의 상태를 보면 minified 되어있는데 진짜로 이렇게 쉽게 빌드가 됐다...

플러그인?

React 같은걸 쓸 땐 어떻게 하냐 하면 Babel 설정을 건드려주면 되는데
이것도 너무...쉽다.
(원래 Babel 설정 만져야되면 복잡하고 무서운데...)

yarn add --dev @babel/preset-react 으로 Babel의 React 플러그인을 설치 후

.babelrc 를 만들고 아래 내용을 넣어주면 끝이다.

{
  "presets": ["@babel/preset-react"]
}

...와
webpack 쓰면 @babel/core 부터 하나하나 다 설치해줘야 하는데 이렇게 쉽다니...
와아....

총평 : 너무 쉽고 좋다

webpack 을 쓸 땐 뭐 하나 추가하려 하면 설정파일 건드리기가 너무 복잡하고 무서웠는데
parcel은 너무 쉽고 간단하다.