Webpack의 정의
webpack은 모던 JavaScript 애플리케이션을 위한 "정적 모듈 번들러" 이다.
<aside> 🙀
모듈 번들러란?
웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.
</aside>
즉, 간단하게 Webpack은 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러
- 리엑트에서 빌드를 수행할 때 사용하는 소프트웨어
이미지 왼쪽에 보이는 파일들을 하나의 번들로, 즉 꾸러미로 만들어주는 역할을 한다
이렇게 번들링된 파일은 웹 서버에서 정적 파일로 제공된다.
그래서 webpack은 모듈 번들러라고 불린다.
왜 굳이 webpack으로 번들링할까
파일의 크기가 상당히 축소 되고 하나의 압축 파일이 되어 전달하기 용이하기 때문이다
⇒ 웹 세상에서 자바스크립트, HTML, CSS,, 이미지 들이 포함된 개발 코드를 보여줄 때 크기가 많이 줄어들고,가벼운 상태여야 좀 더 신속하게 유저들에게 마주할 수 있기에
webpack은 로더와 플러그인을 활용한다
loader
- js 파일 이외에 css 나 이미지 등의 다양한 파일을 로드할 수 있음
- css 나 이미지 파일 같은 것은 js 파일과 다른 방식으로 작성되어 있기에 이러한 파일을 웹팩에서 모듈로 처리하기 위해 해당 파일들을 js 코드로 변환해야함
- 이 때 로더를 통해 js 코드로 변환하는 작업을 수행
- 로더들은 웹팩에서 모듈 번들링 과정에서 필요한 파일을 처리하여 최종적으로 하나의 번들 파일로 묶어 웹 페이지를 로딩할 수 있도록함
플러그인
- 번들링 과정에서 파일을 해석하거나 변환하는 기능보다는 번들링 결과물애 대한 후처리를 도와주는 역할을 험
왜 사용할까
프론트에서 많이 사용되는 프레임워크인 리액트는 파일의 크기가 꽤나 크다
특히 최근에는 백엔드 로직을 일부 프론트엔드로 옮겨오는 추세이기에 그 복잡도가 더 증가
이러한 대규모 소스 코드를 브라우저가 그대로 다운받아 실행할 경우 너무 느리거나 브라우저가 버티지 못하고 다운된다
따라서 webpack을 사용하여 파일들 간의 의존성 관계를 정리하고, 코드를 최적화하여 하나의 js로 만들어주어야한다.(=main.js)
파일은 페이지 라우팅이나 세션, 쿠키의 값에 따라 필요한 소스코드만을 다운받고 실행시킨다.
모든 소스코드를 한번에 실행시키지 않기 때문에 그 규모에 비해 실행 속도가 빠르다.
이처럼 웹팩을 사용해서 코드를 하나로 번들링하는 작업을 빌드라고 부른다.