웹팩(Webpack)을 파헤쳐 보자!

🐣 들어가기 전에

---

지난 시간에는 '번들', '번들링', '모듈', '모듈 번들러'에 대해서 살펴보았다. 사실 해당 개념들은 작년에 스터디원들과 함께 공부 했었지만, 후루룩 시간이 지난 지금 누군가에게 자신있게 설명할 수 없었기 때문에 다시 정리를 시작했다. 지금은 번들링과 모듈 번들러의 차이에 대해서 설명할 수 있다구! 아무튼 오늘은 모듈 번들러 중 하나인 웹팩(Webpack)에 대해서 정리하겠다! 꼬우꼬우!

 

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQRbX0i4MPhvuxjxXTiud5Ztvb5hrNJQ7I9PA&s

 

🐣 웹팩(Webpack)

---

1. 개념

웹팩(Webpack)은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 모두 각각의 모듈로 보고 하나(또는 여러개)의 파일로 번들링하는 모듈 번들러(번들링 프로세스를 수행하는 특정 도구 또는 소프트웨어).

 

참고로 번들링과 모듈 번들러에 대한 개념은 이전에 정리했으니 참고하도록!

https://haileyham.tistory.com/entry/%EB%B2%88%EB%93%A4bundle%EA%B3%BC-%EB%B2%88%EB%93%A4%EB%A7%81bundling

번들(bundle)과 번들링(bundling)

 

웹팩에 대해서는 아래 youtube 영상을 참고하면 정리가 잘 될 것이다.

https://www.youtube.com/watch?v=NGVc-zw2FG8&ab_channel=%EC%A7%90%EC%BD%94%EB%94%A9GYMCODING

 

2. 웹팩에서의 모듈

웹팩에서 지칭하는 모듈이라는 개념은 위와 같이 자바스크립트 모듈에만 국한되지 않고 웹 애플리케이션을 구성하는 모든 자원을 의미. 웹 애플리케이션을 제작하려면 HTML, CSS, Javascript, Images, Font 등 많은 파일들이 필요. 이 파일 하나하나가 모두 모듈임.

 

3. 웹팩의 등장 배경

파일 단위의 자바스크립트 모듈 관리

Webpack 이전에는 JavaScript 종속성 및 모듈을 관리하는 것이 번거로워서 파일 순서 종속성 및 전역 네임스페이스 오염과 같은 문제가 발생. Webpack은 JavaScript 파일을 번들링하는 보다 효율적인 방법을 제공하여 적절한 모듈 처리 및 종속성 관리를 보장하기 위해 등장.

 

웹 개발 작업 자동화 도구

축소, 변환, 번들링과 같은 작업은 Gulp 및 Grunt와 같은 별도의 도구를 사용하여 수행되었으나 Webpack은 이러한 프로세스를 구성 가능한 단일 도구로 간소화하여 개발 워크플로를 단순화하고 효율성을 향상.

 

웹 애플리케이션의 빠른 로딩 속도와 높은 성능

최신 웹 애플리케이션에는 더 빠른 로딩 시간과 더 나은 성능이 필요했고, Webpack은 코드 분할 및 트리 쉐이킹과 같은 기술을 활성화하고 더 빠른 로드 시간과 향상된 성능을 위해 최종 번들을 최적화하여 이 문제를 해결했음.

 

4. 웹팩으로 해결한 문제

자바스크립트 변수 유효 범위

변수 유효 범위의 문제점을 ES6의 Modules 문법과 웹팩의 모듈 번들링으로 해결

 

브라우저별 HTTP 요청 숫자 제약

웹팩을 이용해 여러 개의 파일을 하나로 합치면 브라우저별 HTTP 요청 숫자 제약을 피할 수 있음. HTTP 요청 숫자를 줄이는 것이 웹 애플리케이션의 성능을 높여줄 뿐만 아니라 사용자가 사이트를 조작하는 시간을 앞당겨 줄 수 있기 때문에 이점임.

* 클라이언트에서 서버에 HTTP 요청을 보내기 위해서 먼저 TCP/IP 연결되어야 함

 

자세한 설명은 https://joshua1988.github.io/webpack-guide/motivation/problem-to-solve.html#%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EB%B3%84-http-%EC%9A%94%EC%B2%AD-%EC%88%AB%EC%9E%90%EC%9D%98-%EC%A0%9C%EC%95%BD

 

사용하지 않는 코드 관리

Dynamic Loading & Lazy Loading

 

---

웹팩도!

 

 

출처 :

https://www.youtube.com/watch?v=NGVc-zw2FG8&ab_channel=%EC%A7%90%EC%BD%94%EB%94%A9GYMCODING

https://joshua1988.github.io/webpack-guide/webpack/what-is-webpack.html#%EC%9B%B9%ED%8C%A9%EC%97%90%EC%84%9C%EC%9D%98-%EB%AA%A8%EB%93%88