웹 개발에서 자바스크립트 파일 여러 개를 웹 브라우저에서 실행할 수 있게 하나의 파일로 묶는 데 사용하는 도구
코드 분할화 - 코드양이 많아지면서 기능 또는 단위별로 분할
웹 성능 향상 - 코드 분할하는 것은 웹 성능 향상을 보장하지 않음, 최종적으로 웹 서비스로 배포할 때는 하나로 합치는 것이 더 좋다
종속성 문제 - 하나의 자바스크립트 파일과 다른 자바스크립트 파일 사이에 의존하는 관계(종속성)가 생기는 문제, 종속성을 고려해 순서에 맞게 파일을 순서대로 실행해야 한다.
-> 모듈 번들러가 이러한 문제를 해결
가장 인기 있는 모듈 번들러
웹팩은 다섯 가지 핵심 구성 요소에 의해 동작이 이루어진다.
엔트리(entry) : 프로젝트에서 사용하는 웹 자원을 변환하기 위한 최초의 진입점
아웃풋(output) : 웹팩이 모듈 번들링을 끝내고 최종적으로 산출되는 파일을 내보내는 경로
로더(loader) : 자바스크립트 파일뿐만 아니라 HTML, CSS, 이미지, 폰트 등에서도 모듈 번들러 작업을 가능할 수 있게 하는 것
플러그인(plugin) : 로더가 완료할 수 없는 추가적인 작업 처리 ex) 최적화, 형태 바꾸기
모드(mode) : 배포용, 개발용 모듈 번들링인지 구분하는 역할
development - 개발용 모듈 번들링, 빠르게 디버깅할 필요 -> 코드 가독성 최적화
production - 배포용 모듈 번들링, 결과물 최대 압축 -> 코드 가독성 떨어짐
none - 모듈 번들링 수행 x
참고자료 : [도서] 아는만큼 보이는 프런트엔드 개발