[JS Bundler][Ch1][Parcel] 정적 파일 연결

파비콘 만들기 

1. 구글에 ico converter 검색 > https://www.icoconverter.com/ 진입

2. 이미지 파일 첨부 > Sizes : 32 pixels면 충분 > Bit depth : 32 bits 선택

3. Convert 

parcel-bundler 실행

parcel-bundler 설치 > index.html 파일 생성 후 구현 > parcel index.html 실행 시,  

index.html 파일이 parcel bundler를 통해서 dist라는 폴더로 모두 변환되어 삽입된다.

> 결국, 웹에서 확인하는 html 파일은 dist 폴더 안에 있는 index.html 파일이다. ↓

정적 파일 연결

루트 경로에 favicon.ico 파일을 넣으면 자동적으로 favicon.ico 파일은 파비콘으로 설정된다. (파비콘 : 주소창의 작은 아이콘)

그런데, 이 같은 방법을 실행했을 때, 주소창의 작은 아이콘이 보여지지 않는다. 

그럴 땐, 파일을 dist 파일에 자동으로 넣을 수 있는 패키지의 도움을 받아 dist 파일에 자동으로 favicon.ico 파일이 들어가게 해준다.

=> 구글에 parcel plugin static files copy 검색 > https://www.npmjs.com/package/parcel-plugin-static-files-copy 진입

> 설치 방법 및 사용법 확인

 

1. parcel-plugin-static-files-copy 설치

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

2. package.json 파일에 새로운 옵션 추가

• [static]이라는 이름의 폴더를 dist라는 폴더로 복사/붙여넣기를 해주는 옵션

3. [static] 폴더에 favicon.io 파일을 넣어주고 npm run dev 실행

4. [dist] 폴더 확인 시, favicon.io 파일이 자동으로 생성된다.

출력