没有路由器的 Webpack 反应 HMR
Webpack react HMR without router
我需要在没有 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 : [
...
]
})
我做错了什么?
抱歉,真的很简单,如果你不会,请更改
module.hot.accept('./App', () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
简化
module.hot.accept();
我需要在没有 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 : [
...
]
})
我做错了什么?
抱歉,真的很简单,如果你不会,请更改
module.hot.accept('./App', () =>
setImmediate(() => {
ReactDOM.unmountComponentAtNode(MOUNT_NODE)
render()
})
)
简化
module.hot.accept();