webpack 2 热重载不重新渲染

Posted

技术标签:

【中文标题】webpack 2 热重载不重新渲染【英文标题】:webpack 2 hot reload not rerender 【发布时间】:2017-01-05 06:40:33 【问题描述】:

我正在开发一个 Universal React 项目,我的客户端入口点是:

import React from 'react'
import render from 'react-dom'
import Provider from 'react-redux'
import AppContainer from 'react-hot-loader'
import Router, browserHistory from 'react-router'
import syncHistoryWithStore from 'react-router-redux'
import addLocaleData from 'react-intl'
import it from 'react-intl/locale-data/it'
import en from 'react-intl/locale-data/en'
import IntlProvider from 'shared/containers/IntlProvider'
import configureStore from 'shared/configureStore'
import routes from 'shared/routes'
import isDev, isLive from 'shared/config'

[en, it].forEach(addLocaleData)

const hook = document.getElementById('app')
const initialState = JSON.parse(hook.getAttribute('data-initial-state'))
const store = configureStore(initialState)
const history = syncHistoryWithStore(browserHistory, store)
let content = (
  <Provider store=store>
    <IntlProvider key="intl">
      <Router history=history>
        routes
      </Router>
    </IntlProvider>
  </Provider>
)

if (isLive) 
  content = <AppContainer>content</AppContainer>


function renderApp() 
  render(content, hook)


if (isLive) 
  module.hot.accept('./index.js')
  module.hot.accept('../shared/routes', renderApp)


renderApp()

在组件更改时,重新加载似乎可以工作,但没有应用渲染.. 也许它发生在热重载技巧发生之前?

注意我的路线配置目前是经典的非动态路线。

【问题讨论】:

【参考方案1】:

我遇到了同样的问题,因为我只是忘记添加模块替换代码

if (module.hot) 
module.hot.accept(
    "./App",
    () => 
        const NextApp = require("./App").App; // THIS LINE
        render(NextApp);
    ,
);

【讨论】:

以上是关于webpack 2 热重载不重新渲染的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 开发服务器不热重载 .vue 文件

webpack-dev-server 热重载不适用于 webpack4

sass 的 webpack 实时热重载

Webpack:热重载不起作用,但更改编译

webpack 热重载的3种方式

webpack热替换心得