리엑트 18의 웹팩과 바벨 수동 설치 및 설정 공부 레파지토리입니다.
- 웹팩은 모든 브라우저가 ES2015방식의 모듈 시스템을 지원하지 않아서 브라우저와 버전에 상관없이 편리한 모듈 시스템을 사용하기 위해 나온 툴이 웹팩 입니다.
- 바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구입니다.
npm init
npm i react react-dom
npm i -D webpack webpack-cli webpack-dev-server
npm i -D babel-loader html-webpack-plugin clean-webpack-plugin css-loader style-loader cross-env dotenv dotenv-webpack
- babel-loader : 웹팩에서 바벨을 사용할 수 있도록 처리
- clean-webpack-plugin : 이전에 번들된 파일 자동 삭제
- html-webpack-plugin : html 템플릿 설정
- css-loader/style-loader : css 관련 파일 처리
npm i -D @babel/core @babel/preset-env @babel/preset-react
npm i -D @pmmmwh/react-refresh-webpack-plugin
바벨 폴리필 설정
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime-corejs3