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

Question

我正在使用此提交中的指令嘗試將react-hot-loader版本3添加到create-react-app 。 （滾動到底部查看babel和webpack配置）

編輯：將'webpack/hot/dev-server'更改為'webpack/hot/only-dev-server'允許熱重新加載工作。 為什么這樣？ 另外，如果無法重新加載完整狀態，我將如何重新加載網頁？

預期行為：

在編輯器中編輯React組件會替換瀏覽器中的模塊，而無需刷新瀏覽器。

實際行為（改變配置）：

在編輯器中編輯React組件會刷新瀏覽器，無論進行何種更改，都會顯示更改。

我的代碼：

我正在使用以下代碼（如本提交中所建議的）重新加載應用程序，包括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

Answer 1

花了半天時間，使用2017年10月的CRA - 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; 

Answer 2

使用create-react-app v0.6.1附帶的服務器似乎對我工作正常。 像這樣： require.resolve('react-dev-utils/webpackHotDevClient'),