리액트에 핫 리로딩 수동 설치해보기

create-react-app 하면 설치되는 핫 리로딩!
어떤식으로 설치되고 동작하는지 궁금해서
수동으로 설치해보면서 삽질해보는 시간을 가졌다 🤪

---

1. 핫 리로딩 관련 패키지 설치

$npm i webpack-dev-server webpack-cli @types/webpack-dev-server fork-ts-checker-webpack-plugin -D
$npm i @pmmmwh/react-refresh-webpack-plugin react-refresh

• webpack-dev-server: CORS 문제를 해결해주는 녀석
• fork-ts-checker-webpack-plugin: 타입스크립트 검사는 원래 블로킹 형태로 검사되는데 이 녀석으로 타입스크립트와 웹팩을 동시에 검사할 수 있다 (동시에 가능하니까 성능이 좋아짐)

2. 핫 리로딩 플러그인 코드 추가

config.plugins.push(new webpack.hotModuleReplacementPlugin());
config.plugins.push(new ReactRefreshWebpackPlugin());

3. devServer 코드 추가

devServer: {
    historyApiFallback: true, // react router 할 때 사용
    port: 3090, // 프론트 로컬 포트 번호
    publicPath: '/dist/',
	proxy: { // CORS 에러 프론트단에서 방어
    	...
    } 
}

webpack의 devServer를 통해서 실행할 경우 index.html에서 ./dist/를 /dist/로 바꿔야 함!

4. scripts에 dev 추가하기

// package.json
"dev": "~ webpack-dev-server --hot" // 옛날 버전
"dev": "~ webpack serve --env development"