1. Parcel
- 구성 없는 단순한 자동 번들링
- 소/중형 프로젝트에 적합
2. 프로젝트 생성
- parcel-template-basic 폴더 생성하고 진행!
- npm 프로젝트 시작
npm init -y
- 개발 의존성 패키지로 parcel-bundler 설치
npm i -D parcel-bundler
3. 프로젝트 시작
01. package.json 수정
{
"name": "parcel-template-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev" : "parcel index.html",
"build" : "parcel build index.html"
// "test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "1.12.5"
}
}02. index.html 생성
- reset.css cdn으로 불러오기!
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parcel Bundler</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./scss/main.scss" />
<script src="./js/main.js" defer></script>
</head>
<body>
<h1>Hello Parcel!!</h1>
</body>
</html>03. scss/main.scss 생성
$color--black : #000;
$color--white : #fff;
body {
background-color: $color--black;
h1 {
color: $color--white;
}
}04. js/main.js
console.log("Hello Parcel!");05. 실행
npm run dev
아직까지는 코린이!
0개의 댓글
관련 채용 정보
