[웹개발] Parcel 번들러로 프로젝트 시작하기

Parcel이란?

모듈화된 코드를 브라우저에서 실행할 수 있도록 여러개로 나눠진 파일을 합쳐주는 번들러의 한 종류다.

 

Parcel로 프로젝트 시작하기

1. 프로젝트 VScode로 열어주기

code <프로젝트 이름>

2. 프로젝트를 npm에서 관리해주기

• package.json 파일 생성
• -y 플래그는 기본 설정 질문을 디폴트로 설정

npm

npm init -y

yarn

yarn init -y

3. Parcel 번들러를 개발용으로 설치하기

npm

npm i parcel-bundler -D

yarn

yarn add parcel-bundler -D

4. Parcel 명령어 package.json 파일에 등록해주기

• dev 명령어: parcel 명령어로 개발 서버 열기 (index.html 파일을 웹브라우저에 띄워주기)
• build 명령어: parcel 명령어로 빌드 해주기 (빌드된 결과물을 dist라는 폴더에 만든다)

“scripts”: {
  “dev”: “parcel index.html”
  “build”: “parcel build index.html”
}

5. Parcel로 개발 서버 열기

서버를 열면 localhost 주소로 프로젝트를 열수있다

yarn run dev

6. Parcel로 빌드 해주기

yarn run build