webpack4 react局部热加载

比眉伴天荒 2021-07-24 22:47 426阅读 0赞

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);
    			  })
    			}

发表评论取消回复

表情：

评论列表（有 0 条评论，426人围观）

还没有评论，来说两句吧...

相关阅读

相关 Webpack 懒加载

懒加载懒加载，也称作按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处拆分，然后在一些代码块中完成某些操作后，立即引用或即将引...

- 日理万妓/ 2024年04月17日 23:40/ 0 赞/ 113 阅读

相关 react 热加载，局部刷新，babel-preset-react-hmre

react热加载 1. 在没有使用相关插件之前，以我开发为例，只用 webpack-dev-server --inline

忘是亡心i/ 2022年06月12日 01:54/ 0 赞/ 284 阅读

相关 springboot 热加载

修改代码后不需要重启服务，自动加载修改的内容。修改内容后restart加载器加载会变动的资源。那些第三方的包不会被重新加载，所以可以提高重启速度 pom.xml配置

╰+哭是因爲堅強的太久メ/ 2022年05月31日 11:21/ 0 赞/ 247 阅读

相关 UE4 pak 热加载

文章转自:[http://blog.csdn.net/u012385432][http_blog.csdn.net_u012385432] 前面的几篇文章中提及了有关.Pak

Love The Way You Lie/ 2022年05月29日 10:23/ 0 赞/ 393 阅读

相关 UE4 热加载版本控制

文章转自:[http://blog.csdn.net/u012385432][http_blog.csdn.net_u012385432] 我们在做项目的时候,通常会有这样的

向右看齐/ 2022年05月26日 04:21/ 0 赞/ 408 阅读

相关 React Redux Router4 Koa 服务端渲染，惰性加载，热更新教程

在实际项目中，大多数都需要服务端渲染。服务端渲染的优势： 1.首屏性能好，不需要等待 js 加载完成才能看到页面 2.有利于SEO 网上很多服务端渲染的

￡神魔★判官ぃ/ 2022年03月16日 13:50/ 0 赞/ 187 阅读

相关 Webpack 懒加载

官方解释：懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些

逃离我推掉我的手/ 2021年12月22日 05:27/ 0 赞/ 387 阅读

相关 webpack4.0 + react

　　webpack4.0 中删除了 module.loaders、NoErrorsPlugin、CommonsChunkPlugin、OccurenceOrderPlugin，

小咪咪/ 2021年10月30日 05:40/ 0 赞/ 370 阅读

相关 webpack4 react局部热加载

1、下载 cnpm install -D react-hot-loader 在devServer中开启hot:true 2、配置

比眉伴天荒/ 2021年07月24日 22:47/ 0 赞/ 427 阅读

相关 webpack4 代码懒加载、预加载

1、新增.eslintrc,解决启用了eslint后import 只能在顶层使用的报错 { "parser": "babel-eslint"

迈不过友情╰/ 2021年07月24日 17:06/ 0 赞/ 671 阅读