Webpack 사용하는 이유

webpack 이전의 방식

webpack이 나오기 이전에는 아래와 같이 단순히 HTML 안에 script태그안 자바스크립트로 조작을 했다.

<body>
  <script src="/a.js" />
  <script src="/b.js" />
  <script src="/c.js" />
</body>

하지만 시간이 흘러 SPA라는 개념이 나타나면서 이러한 방식에는 문제가 생겼다.

애플리케이션에 기능을 추가할때 마다 script 태그가 늘어난다.
script 태그를 많이 사용할때 나타날수 있는 문제는 의존성이 생겼을 때이다.
만약 a.js에서 c.js에 있는 함수나 변수를 사용한다면 c.js가 준비가 되었는지에 따라 오류가 발생할 수 있다는 점이다.
같은 전역 변수를 사용할 위험이 있다.
하나의 HTML에서는 javascript는 같은 공간을 사용하므로 전역 변수가 겹칠 위험이 있다는 것이다.
이것을 방지하기위해 IIFO처럼 익명함수로 감싸서 실행시키면 바깥 컨텍스트의 영향을 안 받지만 모든 script에 강제로 사용하기에는 불편하다.
모든 script 마다 HTTP 요청이 발생한다.
브라우저에서 렌더링을 할때 script 태그를 발견하면 그 즉시 렌더링을 멈추고 다운로드 후 실행을 시킨다.
이러면 사용자에게 그 만큼 늦게 보여진다.

webpack은 모듈 시스템을 지원해서 의존성을 처리한다.
모듈 시스템은 하나의 파일이 하나의 모듈이 되고 필요한 부분만 내보거나 가져다 사용할 수 있다.
이렇기 때문에 의존성 같은 문제를 해결 할 수 있다.
모듈 시스템은 자신만의 공간을 사용한다.
그래서 전역 변수가 겹치는 일이 발생하지는 않는다.
여러 모듈들을 하나로 묶어서 번들링을 한다.
그러면 HTTP 요청 자체가 한번만 실행이 된다.