https://github.com/jikor1st/react18_webpack_babel
리엑트 18의 웹팩과 바벨 수동 설치 및 설정
https://github.com/jikor1st/react18_webpack_babel
babel react webpack
Last synced: about 2 months ago
JSON representation
리엑트 18의 웹팩과 바벨 수동 설치 및 설정
- Host: GitHub
- URL: https://github.com/jikor1st/react18_webpack_babel
- Owner: jikor1st
- Created: 2022-10-14T05:59:24.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-14T06:45:07.000Z (over 3 years ago)
- Last Synced: 2025-02-04T13:26:15.548Z (over 1 year ago)
- Topics: babel, react, webpack
- Language: JavaScript
- Homepage:
- Size: 119 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React18_Webpack_Babel
리엑트 18의 웹팩과 바벨 수동 설치 및 설정 공부 레파지토리입니다.
- reference
- https://juni-official.tistory.com/248
- https://mine-it-record.tistory.com/503
# Webpack의 개념
- 웹팩은 모든 브라우저가 ES2015방식의 모듈 시스템을 지원하지 않아서 브라우저와 버전에 상관없이 편리한 모듈 시스템을 사용하기 위해 나온 툴이 웹팩 입니다.
# Babel의 개념
- 바벨은 주로 ECMAScript 2015+ 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구입니다.
# 패키지 생성 및 설치
### 패키지 생성
```bash
npm init
```
### 리액트
```bash
npm i react react-dom
```
### 웹팩, 플러그인
```bash
npm i -D webpack webpack-cli webpack-dev-server
```
### 웹팩 플러그인
```bash
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 관련 파일 처리
### 바벨
```bash
npm i -D @babel/core @babel/preset-env @babel/preset-react
```
### devServer HMR 핫 리로딩
```bash
npm i -D @pmmmwh/react-refresh-webpack-plugin
```
### plugin-transform-runtime
바벨 폴리필 설정
```bash
npm i -D @babel/plugin-transform-runtime
npm i @babel/runtime-corejs3
```