Webpack이란?

Webpack은 frontend, backend 구분없이 모두 사용할 수 있는 module bundler입니다.

webpack은 서로 연관성있는 웹 자원들(js, html, img, css)등을 묶는 작업(bundling)을 통해
최종적으로는 웹페이지의 성능을 향상 시킵니다.

기능

리소스를 묶어주는 역할

변화를 감지해서 업무를 다시 실행

바벨을 활용해 ES5으로 코드 변환, 브라우저와 상관없이 최신 자바스크립트 기능을 사용할 수 있게 해줌

커피스크립트를 자바스크립트로 컴파일

인라인 이미지를 데이터 URIs으로 변환

CSS 파일을 임포트할 수 있음

개발 웹서버를 실행시킬 수 있음

핫 모듈을 대신해서 사용할 수 있음

첫 화면이 로드될 때 큰 자바스크립트 파일이 불려지는 것을 피하기위해 출력 파일을 여러개로 나눌 수 있음

tree shaking을 만들 수 있음

요새는 SPA 하나의 html 페이지에 여러개의 자바스크립트 파일들이 포함합니다.

연관 되어 있는 자바스크립트 파일들을 하나의 파일로 묶어줘서 관리하기 편합니다.

파일을 컴파일 할 때, 여러 모듈들의 파일을 읽어오는데 시간이 오래 걸리는데,
그 부분을 해결하기 위해 여러 파일을 하나의 파일로 번들링 해줍니다.

하나의 자바스크립트 파일로 만들어서 웹페이지 성능을 최적화 해줍니다.

이상으로 프론트엔드 개발자라면 꼭 알아야 하는 기술 Webpack에 대한 소개였습니다.