웹팩 빌드부터 배포까지 험난한 삽질 과정

이번에는 netlify 같은 서비스의 도움을 받지 않고, 웹팩으로 빌드해보고 Github Pages에서 배포해보기로 했다.

일단 빌드하는 데도 삽질을 많이 했지만, 배포하고 나니 로컬환경에선 잘 동작했던 게 먹통이 되어서 (...)

또 한바탕 삽질을 했다.

아직 온전히 웹팩을 이해한 것은 아니지만,

현재 배포까지는 해결했기 때문에 다음엔 이 만큼의 삽질을 하지 않기 위해 기록한다... 😇

 

 

그래서 웹팩이 뭔지?...

웹팩.. 프론트엔드를 공부하다 보면 한번쯤은 들어봤을 법한 이름.

 

우리가 사용하는 여러 웹 애플리케이션은 모두 수많은 자원들을 바탕으로 구성되어 있다.

HTML, CSS, JavaScript 파일 뿐만 아니라 페이지를 구성하는 이미지, 폰트 등등..

만들 때야 각각의 자원들을 필요에 따라서 구성해야하니 상관없지만,

실제로 서비스를 사용할 때 수많은 자원들을 서버에서 가져온다면.. 아무래도 그만큼 로딩 속도도 길어질 것이다.

이것은 성능도 그렇지만, 사용자의 입장에서 사용 경험을 좋지 않게 만드는 요소가 될 수 있기도 하다.

 

 

적용한 결과부터 보자면,

실제로 웹팩을 적용한 후, 페이지가 넘어갔을 때 단 하나의 파일인 info.app.js만 로드되었음을 볼 수 있다.

이외에도 자바스크립트 변수의 유효 범위 정한다거나,

서버로 보내는 HTTP 요청 숫자를 제약한다던가... 하는 문제들을 웹팩으로 해결할 수 있다고 한다.

info.app.js에 포함되어 있는 파일들은 여러개~

 

아무튼 이 웹팩은 이런 수많은 자원들을 하나의 파일로 합쳐주는 역할을 하고 있다.

이런 것을 모듈 번들러-라고 하는데, 웹팩이 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러라고 한다.

출처: 웹팩 핸드북 https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%B4%EB%9E%80

 

---

사용해보기 -삽질 시작-

이래저래 설치하고, 웹팩 설정 파일인 webpack.config.js를 만들었다.

 

 

Entry

웹팩이 빌드를 수행하는 자바스크립트 파일 경로를 설정하는 Entry.

나의 경우는 멀티 페이지 애플리케이션이기도 했고,

나는 검색 페이지, 정보 출력 페이지(info.html)에 적용하고 싶은 js 파일들이 각각 있었기 때문에 엔트리 포인트를 두 개로 분리했다.

 

 

Output

웹팩의 결과물 파일 경로를 지정하는 Output에서는 파일 이름 옵션을 넣어서,

entry 속성을 포함해서 파일을 생성할 수 있도록 했다.

 

 

Loader

로더는 웹팩이 파일을 해석할 때, 자바스크립트가 아닌 파일들을 변환할 수 있도록 도와준다.

이미지, CSS 등등.. 여러 파일들을 파싱 해서 변환할 수 있다.

나는 호환성을 위해서 Babel-loader를 설정해주었다.

CSS나 SCSS도 Loader를 이용해서 변환할 수 있다.

나는 여기선 웹팩으로 하지 않고, 별도로 postcss, cssnano, autoprefixerd를 이용해서 따로 빌드했다.

 

 

Plugin

플러그인은 변환한 결과물의 형태를 바꾸는 역할인데,

HTML 플러그인은 빌드한 결과물로 HTML 파일을 생성해주는 역할을 한다.

나는 적용하려는 파일이 3개라서, 각각의 인스턴스를 만들었다.

chunks라는 속성으로 엔트리 포인트로 분리한 js 파일을 지정할 수 있다.

 

 

Build & Deploy

그리고 package.json에 빌드라는 이름으로 스크립트를 추가해서 실행했을 때 성공했다면!

새로운 디렉토리에 변환된 파일들이 있을 것..

 

 

배포 같은 경우는 Gitgub Pages로 진행했다.

패키지를 설치해주고, pacakage.json에 스크립트를 추가해주고-..

뭐 자세히 설명된 다른 블로그들이 많으므로 생략..

정상적으로 배포되었다면 터미널에 아래와 같은 메시지가 뜰 것이다.

 

 

이슈....

그런데 배포하고 보니 로컬과 다르게 먹통이 되었다. 😇😇

일단 검색 -> 상세페이지로 넘어가면서 로컬 스토리지에서 현재 날짜와 시간을 저장하는 로직을 받아오지 못해서,

검색 쪽으로 시간 관련 로직을 옮겼다.

옮겨온 코드 일부. . .

그리고 상대 경로로 파일을 지정해놓았더니 배포되었을 때의 경로가 일치하지 않아서 동작이 안되거나,

이미지가 제대로 나오지 않는 이슈가 있었다.

개인적인 프로젝트라 경로를 수정하는 쪽으로 해결했지만,

jsconfig.json 파일로 절대 경로를 설정하는 방법이 더 좋을 것 같다..

 

 

삽질을 마무리하며...

막상 글로 쓰니 뭐.. 별거 아닌 것 같은 느낌이 크지만 시행착오가 많았고 그만큼 시간도 오래 걸렸던 작업이었다~

이번 기회를 통해서 웹팩이라는 것을 드디어 사용해 볼 수 있었다!.. 이런 이유로 웹팩을 사용하는구나를 생각해볼 수 있었던 작업.

웹팩.. 다음엔 좀 덜 낯설게 사용할 수 있지 않을까.. 🤔

 

 

참고

https://bongra.tistory.com/108

[기타] 웹팩(webpack)을 사용하는 이유

https://joshua1988.github.io/webpack-guide/concepts/plugin.html#plugin

Plugin | 웹팩 핸드북