[webpack]핫리로딩

 

수정마다 반복되는 빌드를 줄여줄 리액트 리프레쉬

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

 

프론트 서버도 필요하다 해서

npm i -D webpack-dev-server

 

설치가 좀 걸리시네... 왜 오래 걸리지

그러면 이렇게 설치 되어있음

 

package.json 의 devDependencies 배열에 추가되어 있음

"@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
"react-refresh": "^0.9.0",
"webpack-dev-server": "^3.11.0"

그리고 위의 script 옵션을

"scripts": {
    "dev": "webpack serve --env development"
  },

이렇게 바꿔줍니다.

 

다음으로 webpack.config.js로 가서

const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin": "^0.4.3');

변수명은 알아서 짓고 package.json의 pmmm 저 부분을 가져와서 require

선언 했으면 그 밑에 module의 하위폴더가 아닌 plugins: []에(플러그인 없으면 작성) 함수

plugins: [
	new RefreshWebpackPlugin()
],

습관으로 ; 찍지 말도록 조심... 왜 에러가 뜨나 했다

 

그 다음 module 바벨로더의 plugins 에 'react-refresh/babel' 추가

 

plugins: [
	'@babel/plugin-proposal-class-properties',
	'react-refresh/babel',
],

 

 

이제 데브서버도 추가해준다

여전히 webpack.config.json에서 제일 밑에 추가

 

devServer: {
	publicPath: '/dist/',
	hot: true,
}

publicPath는 위의 path 입력해주면 된다

devServer는 변경점을 감지해서 refresh를 해준다 

 

그럼 이제 npm run dev를 실행하고

결과창을 보면 나오는 주소를 입력해서 보면... 핫!리로딩이 리팩토링 안해도 되는 로컬호스트 완성.

여기서 작업하면 된다! 저장만 해도 리프레시가 알아서 된다니