[번들링과 웹팩] 어려웠던 점 - vanila JS ver.

젬마·2022년 11월 23일
0

codestates

목록 보기
14/18

entry

  • webpack에서의 entry는 프론트엔드 개발자가 작성한 코드의 “시작점"을 뜻함. 즉 웹사이트가 돌아가는 데에 있어 가장 중심이 되는 js 파일. 오늘 실습했던 my agora states reference의 경우 script.js (사용자가 폼을 이용해 전송한 데이터를 데이터 배열에 추가해 화면에 렌더링하는 등의 중심 기능을 수행하는 코드 파일)
  • 경우에 따라 entry 파일은 여러 개가 될 수도 있음 (특정 페이지로 진입했을 때 서버에서 해당 정보를 내려주는 형태의 멀티 페이지 어플리케이션 등)
//기본 값
module.exports = {
	...
  entry: "./src/index.js",
};

//지정 값
module.exports = {
	...
  entry: "./src/script.js",
};

참고

https://joshua1988.github.io/webpack-guide/

❓ 그럼 entry가 될 파일을 제외한 다른 js 파일은 어떻게 처리해야 함?

  • 필요한 파일 (or 그 일부) 을 모듈화하여 내보내고,entry 파일에서 가져오는 방법으로 사용!

모듈화 참고

https://ko.javascript.info/import-export

❓다 만든 번들 파일을 Github Pages로 배포하고 싶을 때에는?

  • 번들 파일 및 플러그인을 이용하여 가공한 html 파일(app.bundle.js, index.html)을 dist에서 docs 폴더로 옮김

  • 작업하던 폴더 (제일 상위 폴더)에 git init으로 local git repository 생성

  • docs 폴더를 통째로 staging area에 옮겨야 하므로 git add docs

  • (이 부분에서 막혀서 고생했다. docs 폴더 내에서 git add . 명령어를 사용하면 docs 폴더 통째로가 아니라, 그 안에 있는 파일만 옮겨지게 된다. 이러면 나중에 ... 후술할 Github Pages 배포 과정에서 문제가 생긴다.)

  • 나머지 과정은 다른 때와 똑같이 쭉 하면 됨. git push -u origin main까지 쭉~~

  • 원격 레포지토리에 docs 폴더가 잘 추가된 것을 확인하고 Settings - Pages로 들어감.

  • Branch를 main, /docs로 설정해줌. docs 폴더를 통째로 옮겨줘야 하는 이유... Branch를 이렇게 설정했는데 정작 docs 폴더가 없으니 몰?루? 하면서 배포가 제대로 이루어지지 않았던 것.

  • 넉넉잡아 5분 정도 기다리면 배포가 완! 료! 됨!

사용한 git 명령어 정리

git init
git add docs
git commit -m "커밋 메시지"
git remote add origin ${원격 레포지토리 주소}
git push -u origin main
profile
취준생은 프론트엔드의 꿈을 꾸는가

0개의 댓글