我正在使用此提交中的说明来尝试将react-hot- loader版本3 添加到中create-react-app。(滚动到底部查看babel和webpack的配置)
react-hot- loader
create-react-app
编辑: 更改'webpack/hot/dev-server'为'webpack/hot/only-dev- server'允许热重装工作。为什么这样?另外,如果无法重新加载完整状态,我将如何使其重新加载网页?
'webpack/hot/dev-server'
'webpack/hot/only-dev- server'
预期行为:
在编辑器中编辑React组件会替换浏览器中的模块,而无需刷新浏览器。
实际行为(更改了配置):
无论在何处进行更改,在编辑器中编辑React组件都会刷新浏览器并显示该更改。
我的代码:
我正在使用以下代码(如本commit所建议)重新加载应用程序,包括Redux的Provider / store。
import React from 'react' import ReactDOM from 'react-dom' import App from "./components/App/App" import "./styles/index.scss" import { AppContainer } from 'react-hot-loader' import configureStore from "./redux/store" const store = configureStore() ReactDOM.render( <div> <AppContainer> <App store={store} /> </AppContainer> </div>, document.getElementById('root') ) if (module.hot) { module.hot.accept('./components/App/App', () => { render( <AppContainer props={{ store }}> {require('./components/App/App').default} </AppContainer>, document.getElementById('root') ) }) }
我的配置:
原始配置来自该create-react-app工具。更改后的配置是我尝试react-hot-loader在此项目中工作的尝试。
react-hot-loader
原始CRA Webpack配置:https : //github.com/facebookincubator/create-react-app/blob/master/packages/react- scripts/config/webpack.config.dev.js
我更改的CRA Webpack配置:https ://gist.github.com/Connorelsea/674a31e157d54144623ebf0ec775e0e7
原始CRA babel配置:https : //github.com/facebookincubator/create-react-app/blob/master/packages/react- scripts/config/babel.dev.js
我更改的CRA babel配置:https : //gist.github.com/Connorelsea/58664bfea423f5708a2e0f168fd391c9
使用最新的CRA-2017年10月1.0.14花了半天,这非常简单。删除所有更改,并做两件事:
1)添加到index.js
if (module.hot) { module.hot.accept(); }
2)稍微更新configureStore.js:
if (module.hot && process.env.NODE_ENV !== 'production') { module.hot.accept('./reducers', () => { const nextRootReducer = require('./reducers'); // eslint-disable-line store.replaceReducer(nextRootReducer); }); } return store;