[Bundler] Parcel vs Webpack

🟡 Parcel vs Webpack

- Parcel : 구성 없는 단순한 자동 번들링, 소/중형 프로젝트에 적합

- Webpack : 꼼꼼한 구성, 중/대형 프로젝트에 적합

---

🔵 Parcel

Parcel – The zero configuration build tool for the web.

 

- favicon 만드는 사이트

ICO Converter

 

- static 폴더를 dist 폴더로 복사해서 붙여넣어줌

npm i -D parcel-plugin-static-files-cp

package.json 파일에

"staticFiles": {
	"staticPath: "static"
}

parcel-plugin-static-files-copy

 

* 공급 업체 접두사 (Vender Prefix)

 

- browserslist 옵션 : 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도

> 해당 명시를 Autoprefixer 패키지가 활용함

> package.json 파일에 아래 삽입 (전세계 점유율이 1%이상이고 해당하는 브라우저의 마지막 2개의 버전까지 지원한다는 뜻)

"browerslist": [
	"> 1%",
    "last 2 versions"
]

 

* 파일 이름 뒤에 rc(Runtime Configuration 약어)가 붙은 파일은 구성 파일 의미함

 

🔵 Webpack

parcel과 달리 직접 구성요소 작성해야함

webpack.config.js는 브라우저 환경이 아닌 node.js 환경에서 동작함

html이 아닌 자바스크립트 파일을 진입점으로 설정함 (진입점 여러 개 설정 가능)

 

Entry and Context | webpack