parcel-bundler-1

홍인열·2021년 8월 13일
0

parcel-bundler

$npm init -y
// => package.json 파일생성 *프로젝트에 npm 설치

$npm i -D parcel-bundler
// => node_modules 폴더, package-lock.json 파일생성. ** -D 개발 의존성 패키지로 설치
// package.json 파일에 parcel-bundler 설치 버전 확인가능.
package.josn파일 내에 아래의 "dev", "build" 명령 추가 
"script" : {
  "dev": "parcel index.html"
  "build": "parcel build index.html"
}
// "dev" => 라이브 서버 오픈용
// "build" => 배포용 파일생성(?)


script에 생성된 명령 실행방법은 아래와 같다.

$npm run 이름

parcel-plugin-static-files-copy

위의 "dev"명령을 통해 라이브서버를 만들면 프로젝트내의 favicon이 보이지 않는다.
이유는 라이브서버에서 보여지는내용은 dist폴더를 기준으로 하기 때문이다.
그래서 라이브서버에서 볼수있도록 favicon을 자동으로 copy 해주는 plugin을 사용할 수 있다.

$npm i -D parcel-plugin-static-files-copy
// => plugin 설치 후 package.json 파일에 아래의 내용을 추가한다.

그리고 static 이라는 폴더를 생성하고 favicon을 해당 폴더에 넣어주면된다.
라이브 서버실행시마다 static 폴더의 파일을 dist 폴더로 copy해 준다.

profile
함께 일하고싶은 개발자

0개의 댓글

관련 채용 정보