정적 파일 연결

"parcel plugin static files copy" 패키지를 사용하여 정적 파일 연결

프로젝트에 연결되었으면 하는 파일을 개발 서버를 열거나 제품화 시킬 때, 직접 웹페이지에 연결되는 dist 폴더로 자동으로 넣어줄 수 있는 패키지이다.

1. 정적 파일 예시(favicon.ico)

이미지 파일 연결을 예시로, favicon.ico 파일 준비한다. png 파일은 ico로 파일로 변환한다.

1-1. img태그 연결

<img src="./images/logo.png" alt="PARCEL" />

1-2. favicon.ico 연결 오류

png파일은 정상적으로 출력되지만 도메인 옆 favicon은 출력되지 않는 것을 확인할 수 있다. 그 이유는 index.html 파일이 parcel-bundler를 통해 dist란 폴더로 모두 변환되어 삽입되었기 때문이다.

결국 웹에서 확인하는 html 파일은 dist 폴더 안에 있는 index.html파일이다.
그것을 만들어내는 용도로 root경로에 있는 index.html 파일을 번들러가 사용하는 개념이다.

1-3 해결 방법

간단하게 favicon.ico 파일을 dist 폴더안으로 넣어주면 되는데, dist폴더 같은 경우에는 parcel번들러의 개발 서버 실행을 통해 새롭게 생성하고 지울 수 있어야하는데 직접 사용하는 파일을 넣는 것은 좋은 방법이 아니다.

따라서 해당하는 파일을 개발 서버를 열거나 제품화 시킬때 자동으로 dist폴더에 넣어주는 패키지를 사용한다.

2. parcel plugin static files copy

2-1. Example

// package.json
{
	...
    "staticFiles": {
        "staticPath": "public",
        "watcherGlob": "**"
    }
}
Multiple Static Directories

2-2. 패키지 설치

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

2-3. package.json 수정

// package.json
"staticFiles": {
    "staticPath": "static"
}

패키지를 통해 static 폴더를 dist라는 폴더로 복사 붙여넣기 해주는 개념

2-4. static 폴더 생성

프로젝트 내에 static 폴더를 생성해준뒤, 해당 폴더에 파비콘 파일을 넣어준다.

2-5. 개발 서버 실행

$ npm run dev

dist폴더안에 favico.ico파일이 생성 된다.

완성

---

참고 사이트

[ICO 파일 확장자로 변경해주는 사이트]