개발 서버 실행과 빌드

지난 편에는 parcel-bundle를 설치했습니다.

로컬환경에서 개발할 때 사용됩니다.

 

기존에 작업하다가 화면 확인은 마우스 오른쪽에 open with live server를 통해 확인했는데,

이제부터는 parcel를 통해 확인할 수 있습니다.

parcel를 실행해보겠습니다.

 

parcel index.html 명령어 입력해서 열어보려고 했는데 에러가 뜹니다.

 

이때, package.json파일에 scripts부분을 수정해보겠습니다.

parcel-bundle를 설치했지만 프로젝트 내부에서만 실행됩니다.

scripts를 수정한 후, parcel index.html은 내부에서 실행하지만 dev로 지칭합니다.

 

수정하고 npm run dev 명령어를 실행해보겠습니다.

서버가 https://localhost:1234 에서 실행될 수 있는 것을 확인할 수 있습니다.

 

실제로 웹에서 동작하는 lodash 모듈을 js파일에서 import _ from '모듈' 로 사용합니다.

_.메소드 로 구체적인 메소드를 실행합니다.

 

 

방금 dev는 parcel와 파일명을 직접 입력했는데

build에서 build단어가 들어갔습니다.

build가 들어간 것은 사용자가 직접 볼 수 있는 것입니다.

 

npm run build를 실행해봤습니다.

왼쪽에 dist 폴더 생성하고 폴더 안에index.html 열어 보겠습니다.

 

기존에 우리가 작업했던 html파일과 다릅니다.

이게 난독화라고 합니다.

코드 난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말합니다.

 

번들(Bundle)은 우리가 프로젝트 개발에 사용한 여러 모듈(패키지)을 하나로 묶어내는 작업을 말합니다.