Bundler[Parcel] - 정적 파일 연결

01.정적 파일 연결이란?

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

1-1.favicon.ico

• 프로젝트 내에 favicon.ico 파일을 준비해줍니다.
• 저는 아래 파일을 이용하여 진행하도록 하겠습니다.

  favicon.ico 파일
  

1-2.연결 오류

• 프로젝트 내에 favicon.ico 파일을 넣어놨으나 파비콘이 웹페이지에 나타나지 않음을 확인할 수 있습니다.
• 이는 index.html 파일이 parcel-bundler를 통해 dist란 폴더로 변환되어 삽입되었기 때문입니다.

1-3.dist 폴더 내의 index.html 파일

• dist 폴더 내의 index.html 파일을 열면 연결된 CSS, JavaScript, img 파일 등이 앞에 해시 기호가 붙어 새롭게 연결되어 있음을 볼 수 있습니다.
• 이처럼 웹에서 동작하는 index.html 파일은 내가 직접 작성한 index.html파일이 위에 처럼 변환되어 dist 폴더 내에 있는 html파일로 저장되어 실행된다고 생각하면 됩니다.

02.정적 파일 연결

2-1.정적 파일 연결 패키지 설치를 위한 웹 사이트

• 구글에 parcel plugin static files copy를 검색하거나 아래 링크로 들어가시면 됩니다.
• 일부 디렉토리에서 번들로 디렉토리로 정적 파일을 복사하는 ParcelJS 플러그인 입니다.

2-2.패키지 설치

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

• 정적 파일 연결 패키지를 개발용으로 설치해줍니다.

2-3.package.json 파일 수정

"staticFiles": {
    "staticPath": "static"
}

• package.json 파일에 이와 같이 코딩을 추가 작성합니다.
• 이는 설치한 패키지가 static이라는 폴더를 dist 폴더로 복사 및 붙여넣기를 해주는 개념입니다.

2-4.static 폴더 생성

• 위 코딩 내용에 따라 프로젝트 내에 static 폴더를 생성해주도록 합니다.
• favicon.ico 파일을 static 폴더안에 넣어줍니다.

2-5.개발 서버 실행

• npm run dev로 개발 서버를 실행하여 결과 화면을 확인 합니다.
• 이처럼 정적 파일로 연결된 favicon.ico파일이 정상적으로 출력 되는 것을 확인할 수 있습니다.