웹팩 왜 쓰지?

script만 있어도, 사용이 가능한데 왜 쓸까? 가장 큰 이유는 Component하나에 전체 기능이 들어가기는 어렵기 때문에, 각각의 기능을 "모듈"처럼 만들어서 사용하기 위함이라고 보면 될 것 같다.

1. init

npm init
npm i react react-dom
npm i -D webpack webpack-cli
npm i -D
babel-loader
@babel/core
@babel/preset-env
@babel/preset-react

error 날 경우 메시지에 따라 추가

@babel/plugin-proposal-class-properties

webpack-cli 4.2 이상버전에서

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

i는 install의 약자
-D는 개발환경에서만 사용하겠다. 실 서비스에는 Webpack이 필요하지 않다.

2. webpack.config.js 생성

3. *.jsx 파일 만들기

config에 작성한 entry를 전부 *.jsx 파일로 만들기 (client.jsx ...)
.jsx 는 모듈로 만드는 거라고 생각하면 편함.

4. 실행

npm run dev 또는 npx webpack

자동빌드 설정

개발용 서버
npm i -D webpack-dev-server