Question

我正在使用this commit中的说明尝试将g版本3添加到react-hot-loader。（滚动到底部查看babel和webpack配置）

修改：将create-react-app更改为'webpack/hot/dev-server'可让热重新加载生效。为什么这样？另外，如果无法重新加载完整状态，我将如何重新加载网页？

预期行为：

在编辑器中编辑React组件会替换浏览器中的模块，而无需刷新浏览器。

实际行为（改变配置）：

在编辑器中编辑React组件会刷新浏览器，无论进行何种更改，都会显示更改。

我的代码：

我使用以下代码（如this commit中所述）重新加载应用程序，包括Redux中的Provider / store。

'webpack/hot/only-dev-server'

我的配置：

原始配置来自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在这个项目中工作的。

原始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

Answer 1

花了半天的时间，使用了CRA - 1.0.14，2017年10月，它非常简单。删除所有更改并执行两项操作：

1）添加到index.js

＆＃13;

if (module.hot) {
  module.hot.accept();
}

＆＃13;

2）稍微更新configureStore.js：

＆＃13;

if (module.hot && process.env.NODE_ENV !== 'production') {
  module.hot.accept('./reducers', () => {
    const nextRootReducer = require('./reducers'); // eslint-disable-line
    store.replaceReducer(nextRootReducer);
  });
}

return store;

＆＃13;

Answer 2

对于我使用create-react-app v0.6.1附带的服务器似乎工作正常。像这样： require.resolve('react-dev-utils/webpackHotDevClient'),

添加react-hot-loader以弹出create-react-app

2 个答案: