• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

React-hot-loader 가 제대로 동작하지 않아요..

18.06.20 10:06 작성 조회수 274

0

수정한 내용만 update 되는게 아니라 전체 페이지가 리로드 되네요...

해결하신 분 계실까요?

답변 1

답변을 작성해보세요.

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()

]

};

혹 이상한 게 있다면 누구든 댓글달아주세요..!