react hot loader를 사용하지 않고, react refresh로 사용을 하고 있다.
코드를 수정할 경우 새로고침 하지않고, 수정된 사항을 빠르게 교체해주는 라이브러리이다.
npm i -D react-refresh // -D -> devdependencie에 설치
npm i -D @pmmmwh/react-refresh-webpack-plugin // webpack 설정시 필요
"scripts" : {
"dev" : “webpack serve —env development”
}
// 추가적으로 webpack 5버전, cli 4저번부터는 위 처럼 작성 해야한다.
// 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()
]