Bundler(Parcel-02.정적 파일 연결)

min seung moon·2021년 4월 26일

Bundler

목록 보기

2/16

1. 정적 파일 연결

img, favicon

01. favicon 만들기!

https://www.icoconverter.com/

02. image는 images 폴더에 favicon은 root 위치에

03. index.html 수정!

<!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>
    <img src="./images/관광고.jpg" alt="관광고" />
</body>

</html>

04. favicon.ico(dist)

-1. dist

현재 index.html 파일은 Pacel Bundler을 통해서 dist라는 폴더에 변환되서 삽입!
hash 기호를 통해 경로가 연결

-2. dist에 favicon 넣기!

dist는 언제든지 parcel bundler을 통해 언제든지 지우고 새롭게 생성할 수 있어야하기 때문에 우리가 직접 사용하는 파일을 삽입하는 것은 좋은 방법이 아니다
해당 파일을 개발서버를 열거나 제품화 시킬때 해당 dist 폴더에 자동으로 넣어줄수 있는 패키지의 도움을 받는것이 좋다!

-3. parcel plugin static files copy

https://www.npmjs.com/package/parcel-plugin-static-files-copy

-4. 설치하기!

npm install -D parcel-plugin-static-files-copy

-5. package.json에 옵션 추가!

static 폴더 생성
favicon을 static 폴더로 이동

{
  "name": "parcel-template-basic",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "parcel index.html",
    "build": "parcel build index.html"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel-bundler": "1.12.5",
    "parcel-plugin-static-files-copy": "2.6.0",
    "sass": "1.32.11"
  },
  "staticFiles" : {
    "staticPath" : "static"
  }
}