> For the complete documentation index, see [llms.txt](https://adam-37.gitbook.io/joomadeung/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://adam-37.gitbook.io/joomadeung/undefined-1/undefined/parcel.md).

# parcel 초기세팅 / 설정 방법

npm 초기화 및 parcel-bundler devDependencies 설치

```bash
1. $ npm init -y
2. $ npm i -D parcel-bundler
```

#### scripts에 하기 내용 추가

```json
// package.json

"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
```

#### 폴더, 파일 추가

```bash
index.html
js/main.js
scss/main.scss
reset.css
public/* // 이미지 파일 관련
```

이미지 파일을 자동으로 dist 폴더에 넣을 수 있게 해주는 라이브러리 설치

```bash
$ npm install -D parcel-plugin-static-files-copy
```

postcss, autoprefixer 설치

```bash
$ npm i -D postcss autoprefixer
```

package.json에 하기 내용 추가

```json
"browserslist": [
    "> 1%", // 전세계 점유율 1% 이상의 모든 브라우저 지원
    "last 2 versions" // 마지막 2개의 버전 지원
  ]
```

.postcssrc.js

```json
// 뒤에 rc(Runtime Configuration) 
```

### \[마켓로그] parcel 설정

```json
npm init -y
npm i parcel sass prettier -D
npm i navigo dotenv chartjs

// package.json
"scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },

"main": "index.js", -> "source": "index.html"
```