Webpack 在没有路由器的情况下反应 HMR答案

【问题标题】：Webpack react HMR without routerWebpack 在没有路由器的情况下反应 HMR
【发布时间】：2017-06-24 21:17:24
【问题描述】：

我需要在没有react-router 的情况下启动 react js 项目，但是没有那个我无法设置热模块更换，请你帮帮我。
我的服务器

const app = express()

// Apply gzip compression
app.use(compress())

if (project.env === 'development') {
  const compiler = webpack(webpackConfig)

   debug('Enabling webpack dev and HMR middleware')
   app.use(require('webpack-dev-middleware')(compiler, {
   publicPath  : webpackConfig.output.publicPath,
   contentBase : project.paths.client(),
   hot         : true,
   quiet       : project.compiler_quiet,
   noInfo      : project.compiler_quiet,
   lazy        : false,
   stats       : project.compiler_stats
 }))
 app.use(require('webpack-hot-middleware')(compiler, {
   path: '/__webpack_hmr'
 }))
} else {
    ....
}

我的应用程序入口点。

const MOUNT_NODE = document.getElementById('root')

let render = () => {
   ReactDOM.render(
    <App store={store} />,
    MOUNT_NODE)
 }

 if (__DEV__) {
    if (module.hot) {
      // Development render functions
      const renderApp = render
      const renderError = (error) => {
      const RedBox = require('redbox-react').default

      ReactDOM.render(<RedBox error={error} />, MOUNT_NODE)
    }

    // Wrap render in try/catch
   render = () => {
      try {
         renderApp()
      } catch (error) {
         console.error(error)
         renderError(error)
      }
   }

  // Setup hot module replacement
   module.hot.accept('./App', () =>
     setImmediate(() => {
        ReactDOM.unmountComponentAtNode(MOUNT_NODE)
        render()
     })
   )
 }

}

./App 是将我的应用程序包装在提供程序中的简单组件。

shouldComponentUpdate = () => false;

 render () {
    return (
    <Provider store={this.props.store}>
       <RootComponent />
    </Provider>  )
 }

主要问题是 - 当我保存这个或子文件时，HMR 重建并没有任何改变，但即使是，我使用路由器，并作为应用程序的入口点传递，而不是简单的组件 - 它工作正常。

export const createRoutes = (store) => ({
  path        : '/',
  component   : CoreLayout,
  indexRoute  : { onEnter: (nextState, replace) => replace('/songs') },
  childRoutes : [
    ...
 ]
 })

我做错了什么？

【问题讨论】：

标签： reactjs webpack redux ecmascript-2016 hot-module-replacement

【解决方案1】：

对不起，真的很简单，如果你不这样做，改变

 module.hot.accept('./App', () =>
    setImmediate(() => {
       ReactDOM.unmountComponentAtNode(MOUNT_NODE)
       render()
    })
 )

简单来说

 module.hot.accept();

【讨论】：

你从哪里找到这个的？我在任何地方都找不到该示例，但它可以在我的应用程序中使用。