Webpack이란?Webpack은 JavaScript 애플리케이션을 위한 **모듈 번들러(Module Bundler)**이다.여러 개의 자바스크립트 파일, CSS, 이미지 등을 하나의 파일(혹은 효율적인 여러 파일)로 묶어 배포할 수 있도록 최적할수있는 도구Webpack이 필요한이유??문제 상황프로젝트가 커질수록 많은 자바스크립트 파일과 CSS 파일이 생김브라우저가 모든 파일을 개별적으로 가져오면 속도가 느려지고 관리가 어려워짐최신 JavaScript 문법은 일부 브라우저에서 지원되지 않을 수 있기때문이다.해결 방법모듈 번들링: 여러 파일을 하나로 묶어 네트워크 요청을 최소화코드 압축(uglify): 파일 크기를 줄여 로딩 속도 개선트랜스파일링(Babel): 최신 문법을 구형 브라우저에서도 사용 가능하도..

Babel (JavaScript 컴파일러) Babel이란?Babel은 최신 JavaScript 코드를 구형 브라우저나 Node.js 환경에서 사용할 수 있도록 ES5로 변환해 주는 컴파일러Babel 설치npm install --save-dev @babel/core @babel/preset-env babel-loader필수 패키지패키지설명@babel/coreBabel 핵심 패키지@babel/preset-env최신 자바스크립트 문법 지원babel-loaderWebpack과 Babel 연동 2.4 Babel 사용 방법1) Webpack과 함께 사용하기webpack.config.jsconst path = require("path");module.exports = { entry: "./src/index.js",..