parcel 정적 파일 빌드

기존의 정적 파일

parcel로 서버를 실행하면 entry 파일에서 시작하여 거치는 모든 파일들은 dist폴더에 빌드가 된다

이 때 빌드되는 과정에서 파일명은 이름.해쉬값.확장자의 형태로 바뀐다

바로 여기서 오는 문제점이 하나 존재하는데

기존 코드에서 사용하지않고 동적으로 불러오는 파일, 비동기로 접근하는 파일의 경우에는 빌드 대상에 포함되지 않는 것

---

나의 경우는 이랬다

처음 js가 실행될 때는 불러오지 않고 입력 이벤트가 발생할 때 경로를 전달 받아서 이미지를 렌더링하려했다

이 때 html.index 파일에서 경로는 ./assets/directory.png를 가르키게된다

위의 폴더 사진을 다시 한 번 보자

내가 사용할 directory.png파일은 빌드되지 않았고 빌드되었다고 해도 해쉬값으로 파일 이름이 변경될것이기 때문에 동적으로 이미지 경로를 불러오는 것은 불가능하다

parcel-plugin-static-files-copy

필요한 정적 파일들을 빌드하는게 아닌 dist폴더에 그대로 복사해서 붙여넣어주는 라이브러리가 존재한다

parcel-plugin-static-files-copy 와 @babel/core를 설치하자 왜인지 파일 카피 라이브러리를 세팅하고 돌리면 자동으로 바벨/코어가 설치된다

설정은 깃허브에 잘 나와있다

다음과 같이 package.json을 설정

...
  "staticFiles": {
    "staticPath": [
      {
      "staticPath": "assets",
      "staticOutDir" : "assets"
      }
    ]
  },
...

staticPath 객체로 옵션을 설정하는데 [복사할 폴더, 복사할 파일 ...] 처럼 배열로 나열해주면된다

폴더나 파일 둘 다 가능하며 파일의 경우 경로를 써주어야하고 프로젝트 폴더 내부에 있다면 위처럼 따로 경로를 쓰지않아도 된다

배열 안에 있는 객체의 staticPath는 복사될 파일,폴더명이고 staticOutDir는 빌드될 폴더의 경로다

그대로 복사되어 해쉬값이 붙지 않아 파일명이 바뀌지않은 것을 볼 수 있다