웹사이트 구성시 수 많은 파일들이 모여 웹사이트를 구성하게 됨 👉🏻 서버의 자원 소모와 웹사이트 느리게 로딩
많은 자바스크립트 패키지들을 사용하면 애플리케이션이 깨지게 됨 👉🏻 이를 해결하기 위해 묶는다는 개념의 번들러 등장
“ 성장하는 프론트엔드에 개발자가 작성하는 것도 증가되어 이를 대처하기 위해 번들러가 생김 ”
💡 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러모듈 번들러❔ html, css 등을 모두 각각의 모듈로 보고 이를 조합해 병합된 하나의 결과물을 만드는 도구
Webpack은 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러❕
성능 최적화 & 자동화 tree shaking과 같은 최적화를 수행 → HTTP 요청 수 ⬇️ 웹사이트의 성능, 로딩 속도 ⬆️
*tree shaking: 코드 축소와 사용하지 않는 코드 제거
파일 단위의 자바스크립트 모듈 관리
모든 파일을 하나씩 나눠 모듈화 → 웹 애플리케이션 구성
번들러가 제공하는 편의성
css가 아닌 Sass 등, typescript 사용 → 번들러가 컴파일 과정에서 필요한 플러그인 추가, 번들러 실행
Dependency Issue(종속성 문제) 해결
서버와 브러우저에서 최대한 원활하게 작동할 수 있는 코드 상당부분을 빌드 시 모든 종속성과 함께 번들하는데 도움을 줌
설정 파일
① 디렉터리 만들기
② NPN 프로젝트 초기화
③ 웹팩과 웹팩 CLI 패키지 설치
④ 웹팩에서 디폴트로 인지하는 설정 파일 이름 webpack.config.js로 빈 설정 파일 만들기
👉🏻 초기 세팅 끝