Frontend - WebPack

WebPack이란?

 

웹 사이트를 개발하다보면 수많은 파일이 생깁니다.

 

완성된 웹 사이트를 브라우저에 로드해보면 정말 많은 파일들이 다운로드되는것을 볼 수 있습니다.

 

하지만 이는 좋지 않습니다. 왜냐하면 네트워크를 통한 파일 다운로드는 용량과 시간, 즉 PC자원을 많이 잡아먹는 작업이기 때문이고, 이러한 작업이 많으면 사용자에게 보여줄 웹 페이지 로딩이 느려집니다.

 

또 많은 자바스크립트 패키지들을 사용하다보면 서로 다른 패키지에서 같은 변수이름 혹은 함수 이름을 사용하는 경우가 있습니다.

 

이런 경우 예측불가능한 오류 또는 충돌이 일어날 가능성이 있습니다.

 

위와 같은 문제를 해결하기 위한 도구가 'bundler'입니다. bundle은 '묶다'라는 의미이고 bundler는 여러 파일을 묶어주는 도구입니다. 

 

대표적인 bundler로는 'WebPack, Browserify, Parcel'등이 있고 가장 인기 있는 번들러가 WebPack입니다.

 

 

 

출처 :

https://webpack.js.org/concepts/

Concepts | webpack

https://www.youtube.com/watch?v=cp_MeXO2fLg&t=0s