Webpack(웹팩)이란?

Webpack(웹팩)이란?

Webpack(웹팩)이란 JavaScript 애플리케이션을 위한 정적 모듈 번들러를 말한다.

 

Module Bundler(모듈 번들러)란?

Module Bundler(모듈 번들러)란 웹 애플리케이션을 구성하는 자원을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

 

Module(모듈)이란?

Module(모듈)이란 프로그래밍 관점에서 특정 기능을 갖는 작은 코드 단위를 말한다.

// 📁 math.js

function sum(a, b) {
  return a + b;
}

function substract(a, b) {
  return a - b;
}

const PI = 3.14;

export { sum, substract, PI };

이렇게 성격이 비슷한 기능들을 하나의 의미있는 파일로 관리하면 모듈이 된다.

 

모듈 번들링이란?

웹 애플리케이션을 구성하는 여러개의 자원들을 하나의 파일로 병합 및 압축해주는 동작을 모듈 번들링이라고 한다.

※ 빌드 = 번들링 = 변환

 

웹팩의 등장 배경

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
   • 자바스크립트의 변수 유효 범위는 기본적으로 전역 범위를 갖는다. 최대한 넓은 변수 범위를 갖기 때문에 어디에서도 접근하기 편리하다.
   • 실제로 복잡한 웹 애플리케이션 개발을 할 때, 선언 할당 시 문제가 발생했다. 변수의 이름을 모두 기억하지 않는 이상, 변수를 중복 선언하거나 의도치 않은 값을 할당할 수 있었다.
   • 예전에는 파일 단위로 변수를 관리하고 싶거나 자바스크립트 모듈화하고 싶을 때는 AMD, Common.js와 같은 라이브러리를 사용했었다.
2. 웹 개발 작업 자동화 도구 (Web Task Manager)
   • 이전 프론트엔드 개발할 때, 텍스트 편집기에서 코드를 수정하고 저장한 뒤 브라우저에서 새로 고침을 눌러야 화면에 변경된 내용을 볼 수 있었다.
   • 웹 서비스를 개발하고 웹 서버에 배포할 때 여러 작업들을 해야 했다.
     • HTML, CSS, JS 압축
     • 이미지 압축
     • CSS 전처리기 변환
   • Grunt, Gulp과 같은 자동화 해주는 도구들이 등장했다.
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능
   • 웹 사이트의 로딩 속도를 높이기 위해 했던 대표적인 노력은, 브라우저에서 서버로 요청하는 파일의 숫자를 줄이는 것이었다. 그렇게 하기 위해 웹 태스크 매니저를 이용해서 파일들을 압축하고 병합하는 작업들을 진행했다.
   • 초기 페이지 로딩 속도를 높이기 위해 나중에 필요한 자원들은 나중에 요청하는 레이지 로딩(Lazy Loading)이 등장했다.

 

웹팩으로 해결하고자 하는 기존의 문제점

1. 자바스크립트 변수 유효 범위
   • ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결 가
2. 브라우저별 HTTP 요청 숫자의 제약
   • TCP 스펙에 따라 브라우저에서 한번에 보낼 수 있는 HTTP요청 숫자는 제약되어 있다. (클라이언트에서 서버에 HTTP 요청을 보내기 위해서 먼저 TCP/IP가 연결되어야 함)
   • 익스플로러 7(2번), 익스플로러 8, 9(6번), 익스플로러 10(8번), 익스플로러 11(13번), 크롬, 사파리, 파이어폭스, 오페라, 안드로이드, iOS(6번)
   • HTTP 요청 숫자를 줄이는 것은 웹 애플리케이션의 성능을 높여주고 사용자가 사이트를 조작하는 시간을 앞당겨줄 수 있다.
   • 웹팩을 이용해서 여러 개의 파일을 하나로 합치면 브라우저별 HTTP 요청 숫자 제약을 피할 수 있다.
3. 사용하지 않는 코드의 관리
4. Dynamic Loading & Lazy loading
   • 이전에는, Require.js와 같은 라이브러리를 쓰지 않으면 동적으로 원하는 순간에 모듈을 로딩하는 것이 불가능했다.
   • 웹팩의 Code Splitting 기능을 사용하면, 원하는 모듈을 원하는 타이밍에 로딩할 수 있다.

 

 

---

참고

https://webpack.kr/concepts/

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html

https://joshua1988.github.io/webpack-guide/motivation/why-webpack.html#%EC%9B%B9%ED%8C%A9%EC%9D%98-%EB%93%B1%EC%9E%A5-%EB%B0%B0%EA%B2%BD

https://docs.diffusiondata.com/cloud/latest/manual/html/designguide/solution/support/connection_limitations.html