22.11.09 : webpack

웹팩은 오픈 소스 자바스크립트 모듈 번들러이다. 모듈 번들러는 여러개로 나뉘어져 있는 파일들을 하나로 만들어준다는 개념으로, 주로 자바스크립트를 위한 모듈 번들러이나 호환 플러그인을 포함할 경우 HTML, CSS, 이미지와 같은 property들을 변환할 수 있다.

 

왜 여러 파일들을 합치는 과정이 필요할까?

 

그 이유는 HTTP요청 방식과 관련있다. HTTP/2에서는 하나의 커넥션에 동시에 여러 파일들을 요청할 수 있지만, 우리가 주로 사용하는 HTTP/1.1 에서는 하나의 커넥션에서 하나씩 요청을 보내야 한다. 즉 요청하는 파일들이 많을수록 비효율적이다. 요청 수를 줄이기 위한 방법이 바로 번들러이다.

 

왜 웹팩(webpack) 을 쓰는건가?

webpack을 사용해야 하는 이유를 이해하기 위해서는 번들러가 사용되기 전에 어떻게 JavaScript를 사용했었는지 알아야 한다.

 

브라우저에서 JavaScript가 동작하는 두가지 방법이 있다. 

먼저 각 기능이 있는 스크립트를 추가한다. 이 방식은 너무 많은 스크립트로 인해 네트워크의 병목을 유발하는 원인이 될 수 있어서 확장이 어렵다.  두 번째 옵션은 모든 프로젝트에 하나의 큰.js 파일을 만들어 사용하는 것인데, 이것은 스코프와 크기, 가독성, 유지보수에 문제를 발생시킬 수 있다.

 

IIFEs - Immediately ivoked function expressions

 

IIFE는 대규모 프로젝트에서 스코프 이슈를 해결한다. 스크립트 파일을 IIFE로 감싸면 스코프에 대한 걱정 없이 파일을 안전하게 연결하거나 결합 할 수 있다. => 안전한 번들링이 가능하다.

 

웹팩은 IIFE를 사용해 번들링하며, IIFE를 사용하는 다른 도구들 (Make, Gulp, Grund, Brocooli, Brunch ...)과 달리 dependency graph를 생성해 빌드시켜준다는 특징이 있다. 따라서 규모, 복잡도가 있는 프로젝트에서는 웹팩을 사용하는 것이 좋다.

 

이 외에도 우리가 웹팩을 사용하는 이유는 다음과 같이 정리할 수 있다.

 

• 자바스크립트 어플리케이션 및 이미지, 폰트, 스타일 시트 등을 번들링 해준다 - ESM과 Common JS를 모두 지원
• 번들링의 성능 개선을 고려
• 코드 스플리팅을 이용해 필요한 모듈만 로드하여 요청 지연을 줄인다.

 

 

Reference

https://webpack.kr/concepts/why-webpack/

Why webpack | 웹팩

https://velog.io/@sdong001/Webpack-%EC%9D%B4%EA%B2%83%EB%A7%8C%EC%9D%80-%EC%95%8C%EA%B3%A0-%EA%B0%80%EC%9E%90#webpack%EC%9D%98-%ED%95%B5%EC%8B%AC%EC%9A%94%EC%86%8C

Webpack의 핵심

https://seogeurim.tistory.com/13

우리는 Webpack이 왜 필요할까?