2022-07-21
전에 프로젝트를 하다가도 weppack을 배포 도중 건드렸던 경험이 있고 지속적으로 타입스크립트나 자바스크립트를 공부하는데 있어서 배포시 자주 등장하기에 이번기회에 webpack이란게 무엇인지 정리를 해볼려고 한다
🚩웹팩이란 대체 무엇일까?
출처:짐코딩웹팩강의영상
흔히 우리는 자바스크립트나 타입스크립트로 개발을 할시에 브라우저 단에서 원하는 html,css,js,img 등 파일들(리소스)에 대해서 서버에 매번 요청을 하여 정보를 가져와 랜더링을 통하여 보여주는 원리로 사용자가 UI를 보게 된다.
이 때 네트워크단을 한 번 확인해보게되면
이와 같이 비록 하나의 index.js에서 포함하고있는 모듈들을 리소스로 불러올지라도 각각의 모듈은 또 다른 모듈들을 import하고 있을 수 있어 결국에는 모든 모듈들을 리소스로 다 서버에서 가져오게 되는 것이다.
(여기서 모듈들은 자주 쓰이는 기능들에 대하여 파일별로 나눠놓은것을 의미한다)
그럼 우리는 이러한 생각에 빠진다..
만약에 엄청난 많은 모듈들을 불러오면..?
결국에 수백,수천개의 모듈들을 불러오게 되면 브라우저 입장에서는 많은파일들을 다운로드를 받는데까지 오랜시간이 걸려
웹로딩이 느려지는걸 사용자가 느낌,,,
더더욱 옛날에는 MPA(multiple page application)이었어서 매번 새로운 html을 불러오는 형식이었지만 현대에는 대부분 SPA(single page application)으로 더욱이 하나의 index.html에서 수백,수천개의 모듈들을 불러와 동적으로 되는 구성이라 현시대에서는 불가피한 문제인걸 느끼게 된다...
이래서 생겨나는 아이디어
어떻게 하면 배포시 최대한 적은 http get 수를 줄일 수있을까?...
즉 번들링이라는 것은 하나로 모듈을 묶는 작업을
번들링(Bundling)
이라고 하며
이렇게 하나의 번들로 만들어주는 도구를
🔑모듈 번들러(Bundler)
라고 한다
그 중에서 가장 프론트엔드에서 많이 쓰이는 것이
🚩웹팩!!
인 것이다.
🙋♂️웹팩의 장점
- 우선 웹팩을 사용함으로써 서버로 요청하는 수가 급격히 줄어 사용성이 향상된다!
2.주로 자바스크립트를 번들링할 때 많이 사용하지만 html,css,이미지 파일들도 변환 시켜준다
🔑웹팩을 사용해보기
우선 간단한 상황을 만들어보자
여러개의 모듈을 만들어 놓았다고 해보자
1)a.js
2)b.js
3)c.js
그리고 a.js에서는
1-1)a-1.js
1-2)a-2.js
를 import하고 있고
index.html에서
<script type="module"></script>통해 이와같이 불러와주고 있다
그럼 이에 따라서 비록 index.html에서는 3개의 모듈을 불러오는 것처럼 보여도 네트워크 상으로는 리소스를 보면
이와같이 하나의 모듈당 같이 import되는 전체를 불러오면서 각 리소스별로 시간당 꽤 걸리는 걸 확인할 수 있다.
따라서 이걸 이제부터 웹팩으로 하나의 파일로 바꾸겠다
그 전에 위에서 index.html에서 부르는 부분을 보기 좋게 index.js 파일에 다가 하나 만들어서
index.js 파일을 호출하는 식으로 하도록 정리하겠다.
index.js라는 파일에 코드를 첫번째줄처럼 옮기고 두번째 부분은 그냥 간단하게 테스트 삼아 버튼들을 만들어본거니 크게 중요치 않다(그냥 index.js에 다른 코드들을 채웠다정도로만 보면 된다)(중요한점은 하나의 모듈로 정리해보았다)
지금 하나의 파일로 모았으니 이미 된거 아닌가 생각할 수있다?
하지만 이래봤자 index.js에서는 똑같이 import를 여러번 다른 모듈들을 하니 결국에는 아까랑 똑같은 상황이니 달라진 건없다.
🔑환경설정
npm init -y
//우선적으로 기본적인 package.json을 만들기 위해 명령
이와 같이 생김(그냥 기본적인 package.json 파일의 생성)
npm install --save-dev webpack webpack-cli
//로컬로 웹팩을 설치하기 위해 --save-dev옵션으로
//package.json에 dependecies를 늘린다
이제 로컬환경에 깔린 webpack-cli를 사용하기 위해서는
npx 명령어를 쓴다
npx webpack --entry ./src/index.js --output-path ./dist
//entry는 번들링의 시작점으로서 어떤 파일을 기준으로
//번들링을 알지 뒤에 넣어주면 된다
//output은 번들링 된 결과를 어디다 넣을지 알려주는 것
//dist라는 폴더명에 아래 넣고 싶어서 저리 넣은거임😲결과
결과적으로 dist 폴더 아래 main.js라는 이름으로 index.js에 있던 애들을 하나의 파일로 쭉 압축해서 한줄로 만들어준걸 알 수 있다.
<콘솔창>
단, 여기를 보면 Production이라는 글자가 파랗게 들어온걸 확인할 수 있다.
이건 mode를 고를 수가 있는데
production:압축을 해서 한줄로 쭉 만들어줌(흔히 배포시
development:압축을 안하고 여러줄로 만들어줌(리소스를 좀 더 잡아먹음)
<모드를 바꾸는 명령어>
npx webpack --entry ./src/index.js --output-path ./dist --mode development
//포인트는 --mode
그리고 이제는 다시 index.html에서
바뀐 dist에 있는 main.js를 불러와주면 된다
<index.html>
<네트워크>
보면 이제 불러오는 것은 하나지만 기능적으로는 아주 잘 돌아가는 것을 확인할 수 있다.
🚩결론
서버로의 요청
8Requests->3Requests
요청 수 또한 급 줄어 시간도 급 줄어드는 걸 확인할 수 있다.
🔑Webpack.config.js 사용하기
웹팩 공식홈페이지에 들어가면
웹팩공식사이트
Bundle it 이라는 제목아래
이런 코드들이 있다.
이걸 복사해서
webpack.config.js 파일을 만들어서
이렇게 복사해서 넣어준다.
webpack은 자체적으로 webpack.config.js를 기본적으로 항상 찾아서 참조하는 성격이 있어서 만들어주기만 하면된다.
<webpack.config.js>
mode는 기호에 따라서 바꾸고싶다면 저렇게 추가적으로 넣어 바꿔줘도 된다.
entry는 내가 번들링 할려는 시작점
output은 만들고나서의 그걸 저장할 경로
npx webpack
//이제는 이렇게만 하면 자동으로 bundle.js라는 이름으로 생성됨index.html에서도 똑같이 script태그 부분에 bundle.js로 이름만 바꿔주자!
마지막으로 매번 이제 이렇게 하기 귀찮으니 build 명령어로 쉽게 하게 만들자
package.json에 이렇게 build명령어에 추가해주자
그럼
npm run build
//이제 이 명령어로도 배포시에 자동으로 웹팩이 실행되서 번들링이 된다.🚩결론
최종적으로 배포시에 우리는 index.html과 bundle.js만 배포해주면 되는 것이다.굳이 우리가 가지고 있던
a.js,b.js,c.js 이런것들,,,
안해줘도 된다!
