[Vue.js] Webpack과 Babel

Webpack

• 모듈로 나눠진 스크립트(와 CSS 등 다른 리소스까지도)를 하나의 bundle로 묶어주는 플러그인
  • 번들링 하는 이유
    • 브라우저가 ES6 이후의 모듈 방식을 이해하지 못하는 경우도 있고
    • 파일이 파편화되어있는 편이 네트워크 부담이 더 크다고 함
    • 이름 충돌 가능성도 낮아짐
  • Vue.js에서만 쓰이는 것은 아니고 널리널리 사용됨
• Vue-CLI 버전 2 이하에서 생성한 프로젝트: webpack.config.js가 루트폴더에 노출됨
• Vue-CLI 버전 3 이후
  • webpack.config.js: node_modules/@vue/cli-service 폴더 밑에 감춰짐
  • 설정을 확인하는 법: 콘솔에 vue inspect > options.js 입력
  • 설정을 수정하는 법: 루트폴더에 vue.config.js 파일을 생성하여 내용 작성
• loader: 스크립트가 아닌 리소스를 웹팩이 처리할 수 있도록 변환시켜주는 역할

Babel

• 최신 사양이 반영된 스크립트를, 브라우저가 이해할 수 있도록 변환시켜주는 역할
  • 1차적으로는 Babel이 ES버전을 낮춰주지만, 직접변환이 어려운 경우도 있는데 이를 @babel/polyfill이 추가로 변환시켜 줌
  • 그 외에도 단순변환이 어려운 사양들에는 각각 다른 플러그인들이 필요할 수 있음

Vue.js 프로젝트에서의 흐름

1. Babel이 스크립트를 호환버전으로 변환한다.
   • 이 때 각종 추가 플러그인이 필요할 수 있다.
2. Webpack이 각각의 리소스를 하나의 bundle.js로 묶는다.
   • 이 때 스크립트 외의 리소스들은 loader가 데려온다.

적어놓고 보니 흐름이랄 것도 없음

참고한곳

• Webpack과 babel이 뭐요 @ Juneyr.dev
• Vue CLI로 생성한 프로젝트의 웹팩 설정 방법 @ Cracking Vue.js
• Babel과 Webpack을 이용한 ES6 환경 구축 @ PoiemaWeb