🔎 Webpack이란

프론트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)

주로 자바스크립트 애플리케이션의 파일을 관리하고, 여러 모듈을 하나의 번들로 묶어주는 역할
-> 웹 개발에서 많이 사용

주요 기능

1. 모듈 번들링
   웹 애플리케이션에서 사용하는 자바스크립트 파일, css, 이미지 등을 하나의 파일 또는 여러 개의 파일로 묶어 웹 브라우저가 효율적으로 로드할 수 있도록 함
   

2. 코드 스플리팅
   애플리케이션의 크기를 줄이기 위해 필요한 코드만 로드할 수 있게 해줌
   ➡ 페이지에 필요한 코드만 로드하고, 나머지는 필요할 때 로드하는 방식

3. 트랜스파일링
   최신 자바스크립트 문법을 구형 브라우저에서도 호환되도록 변환
   ➰ ex. Babel 사용 ➡ ES6 문법을 ES5로 변환

4. 플러그인과 로더
   다양한 플러그인과 로더를 통해 번들링 과정에서 파일을 변환하거나 다양한 파일 포맷 지원
   ➰ ex. css파일을 자바스크립트 파일에 통합, 이미지 파일을 인라인으로 처리

5. 디버깅과 최적화
   개발 과정에서의 디버깅을 용이하게 하고, 배포 시 파일 크기를 줄여 성능 최적화

Webpack 설정 파일

Vue3 이상부터는 웹팩 설정 파일을 /node_modules/@vue/cli-service/webpack.config.js 디렉터리에 넣어놓았다

✅ 해당 설정 파일 안의 내용들은 디폴트값들이다. 프로젝트를 진행하면서 webpack 설정 파일은 아직 건드리지 않았기 때문..!
✅ 멘토님이 피드백 주시면서 이런 설정 파일 안에서 속성값들을 지정해주어야 동작하는 부분들도 있다고 하셔서 webpack에 대해서 조금 더 깊게 공부를 해봐야 할 것 같다 !!!
✅ 어제 간단히 설명을 들었을 때에는 모듈 번들링과 트랜스파일링 기능에 집중해서 들었는데, 다른 기능들도 수행하고 요즘 프론트 개발에서 많이 쓰이는 기능이라고 하니 어떤 역할을 하는지에 대해서 혼자 더 공부해봐야 될 것 같다 💪🏻