react refresh 설치 및 설정

chu·2021년 3월 5일
0

react hot loader를 사용하지 않고, react refresh로 사용을 하고 있다.

react refresh?

코드를 수정할 경우 새로고침 하지않고, 수정된 사항을 빠르게 교체해주는 라이브러리이다.


npm 설치

npm i -D react-refresh // -D -> devdependencie에 설치
npm i -D @pmmmwh/react-refresh-webpack-plugin // webpack 설정시 필요

package.json 설정

"scripts" : {
	"dev" : “webpack serve —env development”
}
// 추가적으로 webpack 5버전, cli 4저번부터는 위 처럼 작성 해야한다.

webpack.config.js

// npm에서 두번째로 설치한 plugin을 require
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

// module 옵션에 추가
"module": {
  // loader는 babel-loader
  "options": {
  	"plugins": [“react-refresh/babel”] // 적용
  },
},

// plugins에 추가
"plugins" : [
	new ReactRefreshWebpackPlugin()  
]
profile
한 걸음 한걸음 / 현재는 알고리즘 공부 중!

0개의 댓글