使用webpack配置react-hot-loader热加载局部更新

 更新时间:2023年1月17日 08:30  点击:31 作者:huangpb0624

webpack配置react-hot-loader热加载局部更新

有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢?

其实这两者的更新是有区别的,webpack-dev-server 的热加载是开发人员修改了代码,代码经过打包,重新刷新了整个页面。

而 react-hot-loader 不会刷新整个页面,它只替换了修改的代码,做到了页面的局部刷新。

但它需要依赖 webpack 的 HotModuleReplacement 热加载插件。

下面来说说怎么来配置 react-hot-loader 。

步骤1

安装 react-hot-loader 

npm install --save-dev react-hot-loader

步骤2

在 webpack.config.js 的 entry 值里加上 react-hot-loader/patch,一定要写在entry 的最前面,如果有 babel-polyfill 就写在

babel-polyfill 的后面。

entry: [
        'babel-polyfill', 
        'react-hot-loader/patch', //设置这里
        __dirname + '/app/main.js'
]

步骤3

在 webpack.config.js 中设置 devServer 的 hot 为 true

devServer: {
        contentBase: './build', 
        port: '1188', 
        historyApiFallback: true,  
        inline: true,  
        hot: true,  //设置这里
    },

步骤4

在 .babelrc 里添加 plugin

{
    "presets": ['es2015', 'react'],
    "plugins": ["react-hot-loader/babel"]   //设置这里
}

步骤5

在 webpack.config.js 的 plugins 里添加依赖的 HotModuleReplacement 插件

plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + "/app/index.tmpl.html"
        }),
        new webpack.HotModuleReplacementPlugin() //设置这里
]

步骤6

最后这个操作就是在项目的主入口,比如我的是 main.js 添加些代码

import React from 'react';
import ReactDOM from 'react-dom';
import Greeter from './greeter';
import "./main.css";
import { AppContainer } from 'react-hot-loader'; //设置这里
 
const render = (App) => {
	ReactDOM.render(
		<AppContainer>
			<App />
		</AppContainer>,
	document.getElementById('root')
	)
}
 
render(Greeter)
 
// Hot Module Replacement API 
if (module && module.hot) {
    module.hot.accept('./greeter', () => {
        render(require('./greeter').default)
    })
}

简写成这样试了一下也能成功

import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
import "./main.css";
 
ReactDOM.render(
    <App />,
    document.getElementById('root')
)
 
if (module && module.hot) {
    module.hot.accept()
}

按顺序做完上面6个步骤,恭喜你,React 的 react-hot-loader 已经配置好了。

react-hot-loader热加载不生效的可能问题

如果是下面这样,就不会执行热加载

const AsyncLogin = asyncComponent(() => import("./Login")); //我不能热加载
import home from './home'  //我能热加载
<Route exact path='/' component={home}/>
<Route   path='/login' component={AsyncLogin}/>
<Route   path='/home' component={home}/>

也就是说需要同步引入组件才可以局部热加载成功

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。

原文出处:https://blog.csdn.net/huangpb123/article/details/78556652

相关文章

  • Webpack 实现 Node.js 代码热替换

    这两天为了这个问题, Gitter 上问, Twitter 上问, GitHub 上问, 两天没反应 原来写博客的 jlongster 不理我, 我也不知道 Webpack 作者的联系方式 最后在 Gitter 上发的消息他似乎看到了, 就粗略地解释了一遍, 醍醐灌...2015-10-23
  • vue-cli webpack 开发环境跨域详解

    本篇文章主要介绍了vue-cli webpack 开发环境跨域详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-22
  • 详解vue+vueRouter+webpack的简单实例

    这篇文章主要介绍了详解vue+vueRouter+webpack的简单实例,非常具有实用价值,需要的朋友可以参考下...2017-06-24
  • IDEA配置静态资源热加载操作(Springboot修改静态资源不重启)

    这篇文章主要介绍了IDEA配置静态资源热加载操作(Springboot修改静态资源不重启),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-02
  • 深入webpack打包原理及loader和plugin的实现

    这篇文章主要介绍了深入webpack打包原理及loader和plugin的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-07
  • Webpack打包css后z-index被重新计算的解决方法

    这篇文章主要跟大家分享了Webpack打包css后z-index被重新计算的解决方法,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面跟着小编一起来学习学习吧。...2017-06-24
  • webpack搭建脚手架打包TypeScript代码

    本文主要介绍了webpack搭建脚手架打包TypeScript代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-21
  • 80行代码写一个Webpack插件并发布到npm

    最近在学习 Webpack 相关的原理,本文用80行代码写一个Webpack插件并发布到npm,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-24
  • vue-cli+webpack记事本项目创建

    这篇文章主要为大家详细介绍了vue-cli+webpack创建记事本项目,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-04-03
  • 使用webpack和rollup打包组件库的方法

    这篇文章主要介绍了使用webpack和rollup打包组件库的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-02-25
  • Webpack-cli安装成功后查看webpack -v报错案例详解

    这篇文章主要介绍了Webpack-cli安装成功后查看webpack -v报错案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-09-08
  • webpack拆分压缩css并以link导入的操作步骤

    我们运行打包后会发现less转为了css文件,但css文件确通过js加入style标签,下面我们将css进行拆分出来,并以link标签引入,具体实现步骤一起看看吧...2021-10-19
  • 详解WebApiClient的JsonPatch局部更新

    这篇文章主要介绍了详解WebApiClient的JsonPatch局部更新,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22
  • Webpack 实现 AngularJS 的延迟加载

    这篇文章主要介绍了Webpack 实现 AngularJS 的延迟加载的相关资料,需要的朋友可以参考下...2016-03-03
  • webpack的移动端适配方案小结

    移动端开发的过程中,一个最常见的问题就是适配不同的屏幕宽度。本文主要介绍了webpack的移动端适配方案,感兴趣的可以了解一下...2021-07-25
  • 使用Webpack构建多页面程序的实现步骤

    这篇文章主要介绍了使用Webpack构建多页面程序的实现步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-16
  • 利用webpack理解CommonJS和ES Modules的差异区别

    这篇文章主要介绍了利用webpack理解CommonJS和ES Modules的差异区别,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-17
  • 详解webpack的clean-webpack-plugin插件报错

    这篇文章主要介绍了详解webpack的clean-webpack-plugin插件报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-17
  • 详解webpack解惑:require的五种用法

    这篇文章主要介绍了详解webpack解惑:require的五种用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2017-06-15
  • Kubernetes中Nginx配置热加载的全过程

    Nginx已经是互联网IT业界一个无敌的存在,作为反向代理、负载均衡、Web服务器等多种角色的扮演者,下面这篇文章主要给大家介绍了关于Kubernetes中Nginx配置热加载的相关资料,需要的朋友可以参考下...2022-01-19