webpack 설치

webpack 설치하기 & 실행

 

1️⃣ 터미널에서 폴더 경로 들어가서 

npm init

✔ package name 만 정해 준 뒤 넘어가기
✔ author : 내이름
✔ license : MIT
✔ yes치고 엔터

👉 package.json 생성 : 여기에 리액트 개발에 필요한 모든 패키지들을 넣어주면 됨

 

2️⃣ react / reactDom 설치

npm i react react-dom

 

3️⃣ 리액트 개발에 필요한 webpack / webpack-cli   

실제 서비스에는 웹팹필요 없고, 개발에만 쓰기기에 -D

npm i -D webpack webpack-cli

 

4️⃣ 바벨 깔기

npm i -D @babel/core  (바벨의 기본적인것 들어있음) npm i -D @babel/preset-env  (우리들의 브라우저에 맞게 알아서 최신문법을 옛날 문법을 지원하는걸로 바꿔줌) npm i -D @babel/preset-react (이게 있어야 jsx를 지원할 수 있음) npm i -D babel-loader (바벨과 웹팩을 연결)

 

5️⃣ 바벨 플러그인 

npm i -D @babel/plugin-proposal-class-properties

 

 

6️⃣ webpack.config.js 파일 생성

 

7️⃣ refresh 웹팩 플러그인(refresh 자동)

npm i react-refresh @pmmmwh/react-refresh-webpack-plugin -D

 

8️⃣ webpack-dev-server 설치

npm i -D webpack-dev-server