Webpack реагирует на HMR без роутера
Мне нужно начать реагировать JS проект без react-router
, но я не могу настроить горячую замену модуля без этого, пожалуйста, вы можете мне помочь.
Мой сервер
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 : [
...
]
})
Что я делаю не так?
1 ответ
Решение
Извините, это было действительно легко, если вы не хотите, изменить
module.hot.accept('./App', () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
Просто
module.hot.accept();