Webpack 사용 이유

하나의 HTML 문서를 구성하는 콘텐츠는 다양합니다.

단순한 마크업 텍스트 뿐만 아니라, css와 폰트 그리고 이미지가 가득합니다.

그런데 현대 웹은 더이상 단순한 “페이지”가 아닙니다.

콘텐츠가 많은 만큼 사용자 경험을 개선하기 위해 비동기 처리를 하고, 상태를 빠르게 업데이트를 해야 하기 때문입니다.

코드가 점점 복잡해지는 문제를 해결하기 위해, 프론트엔드는 공통되는 로직을 추상화하고 분리하는 사고를 코드에 적용하게 되었습니다.

즉 모듈화한 것이죠.

이는 재사용성을 추구하는 개발자의 입장에서 매우 편리한 해결 방법입니다.

하지만 이렇게 많아진 파일을 HTML의 <link>나 <script>를 작성해서 일일이 받아오기에는 문제가 많습니다.

1. css나 js 파일 간 의존성(import)이 있다면 로드 순서를 보장하기 어렵습니다.
2. 브라우저는 각 파일을 여는 것조차 모두 HTTP 요청을 사용하기 때문에 속도가 느립니다.

이를 해결하기 위해 웹팩은 소스 코드를 분석하여 최소한의 번들로 만들어줍니다.

실행 흐름에 따라 로드 순서를 파악하고, 사용되지 않은 코드를 제거하며, 전체 코드를 압축하기 때문에 개발자와 사용자 모두의 경험을 개선해주는 것이 바로 웹팩입니다.

최근에는 next.js 등 프레임워크 내부에서 자동으로 설정해주기 때문에 매우 편리하며, 물론 커스터마이징도 가능합니다.