1、下载
cnpm install -D react-hot-loader
在devServer中开启hot:true
2、配置
创建.babelrc文件,在"plugins"的数组中最顶层添加
"plugins": ["react-hot-loader/babel"]
方式一:
import { hot } from 'react-hot-loader/root'; 确保在react和react-dom之前引入
export default hot(需要局部热加载的组件);
将需要的组件通过hot高阶函数包裹,函数内部实现了这样的方法
if (module.hot) {
module.hot.accept('./App', () => {
const NextApp = require('./App').default; 因为在App里使用的是export default语法,这里使用的是require,默认不会加载default的,所以需要手动加上
render(NextApp);
})
}
方式二:
(1)修改entry入口
entry:[
'react-hot-loader/patch',
主入口文件,
]
(2)添加plugins
new webpack.hotModuleReplacementPlugin(),
(3)修改项目主入口文件
import { AppContainer } from 'react-hot-loader';
...
const render = Component => {
ReactDOM.render(
<Provider store={store}>
<AppContainer>
<Component />
</AppContainer>
</Provider>,
document.getElementById('root'));
}
render(App);
if (module.hot) {
module.hot.accept('./App', () => {
//因为在App里使用的是export default语法,这里使用的是require,默认不会加载default的,所以需要手动加上
const NextApp = require('./App').default;
// 重新渲染到 document 里面
render(NextApp);
})
}
webpack4 react局部热加载
猜你喜欢
转载自blog.csdn.net/weixin_43294560/article/details/113899662
今日推荐
周排行