[Parcel] 프로젝트 생성

OROSY·2021년 4월 20일

TIL bundler frontend parcel

Bundler

목록 보기

2/16

프로젝트 생성

1. Start the project

parcel-bundler에 대해 잘 학습할 수 있도록 하기 위해 실제로 프로젝트를 생성해줍니다.

1.1 패키지 설치

npm을 통해 package.json 파일을 생성하고 parcel-bundler를 설치해줍니다.

$ npm init -y

$ npm i -D parcel-bundler

1.2 package-json 파일

package-json 파일을 오픈하여 script 내에 아래와 같이 parcel 번들러를 이용하여 개발을 할 수 있도록 합니다.

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

1.3 index.html

index.html 파일과 main.scss, main.js 파일을 연결시켜줍니다. 그리고 CSS를 초기화시켜주기 위해 reset css mdn으로 구글 검색하여 나온 아래 링크를 SCSS 링크 태그 위에 코딩해줍니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

<!DOCTYPE html>
<html lang="en">
<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 defer src="./js/main.js"></script>
</head>
<body>
  <h1>Hello Parcel!!</h1>
</body>
</html>