将 react-hot-loader 添加到弹出的 create-react-app答案

【问题标题】：Adding react-hot-loader to ejected create-react-app将 react-hot-loader 添加到弹出的 create-react-app
【发布时间】：2016-09-19 23:08:10
【问题描述】：

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

编辑：将'webpack/hot/dev-server' 更改为'webpack/hot/only-dev-server' 允许热重载工作。为什么这样？另外，如果无法重新加载完整状态，我将如何使其重新加载网页？

预期行为：

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

实际行为（更改配置）：

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

我的代码：

我正在使用以下代码（如this 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 在这个项目中工作。

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

【问题讨论】：

标签： javascript reactjs webpack redux babeljs

【解决方案1】：

花了半天时间，使用lates CRA - 1.0.14, Oct 2017，非常简单。删除所有更改并做两件事：

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;

【讨论】：

【解决方案2】：

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

【讨论】：