-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
React-hot-loader 가 제대로 동작하지 않아요..
18.06.20 10:06 작성 조회수 274
0
수정한 내용만 update 되는게 아니라 전체 페이지가 리로드 되네요...
해결하신 분 계실까요?
답변을 작성해보세요.
1
이수정
2018.07.04
저도 여기서 한참 헤맸습니다.. 저는 webpack, react-hot-loader 둘다 그냥 최신버전으로 받았는데, 강의 그대로 따라하니까 에러나더라고요..
그래서 깃헙에 있는 것으로 따라가서 또 해봤는데 거기의 웹팩 버전도 4는 아니어서 또 에러... 버전 낮은걸로 바꾸면 될 것 같은데 그러기는 싫어서 나중으로 미루고 계속 그냥 개발 하다가 방법을 찾았습니다!
http://gaearon.github.io/react-hot-loader/getstarted/
위 페이지를 참고하여 해결했습니다.
우선 제 프로젝트의 package.json 안에 있는 웹팩과 리액트 핫 로더의 버전은 아래와 같습니다.
"webpack": "^4.12.1"
"react-hot-loader": "^4.3.3"
우선 스크립트는 요렇게 변경했고요, ( --hot 쓰는 대신 webpack안에 plugin으로 적었습니다.
"dev-server": "webpack-dev-server --mode development"
그리고 webpack파일은 아래와 같습니다.
module.exports = { entry: {
app: [
'react-hot-loader/patch',
'./src/index.js'
]
},
output: {
path: __dirname + '/public/',
filename: 'bundle.js'
},
devServer: {
hot: true,
inline: true,
host: '0.0.0.0',
port: 4000,
contentBase: __dirname + '/public/',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
cacheDirectory: true,
presets: ['es2015', 'react'],
},
}
]
}
]
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
};
혹 이상한 게 있다면 누구든 댓글달아주세요..!
답변 1