WebPack이 등장하게 된 계기
Module
모듈이란 코드 재사용, 유지 보수를 위해 파일을 분리해놓은 것
모듈을 여러개 만드는 것은 위에서 말한 장점을 살릴 수 있지만 그만큼 많은 파일이 생성되고 이를 클라이언트와 서버간의 통신으로 들어가면 클라이언트(브라우저)가 서버에게 요청하는 횟수가 늘어나게 된다.
즉! 성능이 떨어지고, 비용이 증가한다.
이 단점을 해결하고자 WebPack이 등장했다. (HTTP요청 수 줄이기)
WebPack
웹팩은 여러 파일을 하나의 파일로 묶어주는 역할을 하는 모듈 번들러다.
웹팩이 등장하기 이전에는 스크립트로 파일을 하나씩 불러와야 하거나
<script src='a.js'></script>
<script src='b.js'></script>또는 모듈 시스템을 이용해서 여러개의 파일을 import해서 사용했다.
<script type="module">
import './a.js'
import './b.js'
</script>그러면 우리가 개발하는 React에서는 어떻게 webpack을 사용할까?
npm패키지를 이용해서 간단하게 설치하고 사용할 수 있다.
npm i --save-dev webpack
실행 방법
npx webpack --entry {파일} --ouput {번들링 된 파일을 위치시킬 곳}
이렇게 webpack을 설치하고 실행한 다음 브라우저의 네트워크 탭에서 스크립트 파일을 하나만 불러오는지, http응답 완료의 속도가 더 빨라졌는지 확인해보면 된다.
webpack.config.js
이 파일은 webpack을 실행할 때 거쳐가는 파일로 미리 설정을 해줄 수 있는 파일이다. (entry, output 설정)
추가 사항
React로 프로젝트를 진행할 때 많은 http요청을 본 적이 없는거 같아서 확인을 해보니 우리가 프로젝트를 생성할 때 create-react-app 을 이용하면 WebPack이 기본적으로 설정되어 포함된다고 한다.
이미 Webpack이 컴파일을 하고 있음.
만약 이미 설정되어 있는 webpack.config.js를 확인하려면
npm run eject
이 명령어를 실행하면 숨겨진 설정 파일들이 디렉토리 노출된다.
