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

目录
  • webpack配置react-hot-loader热加载局部更新
    • 步骤1
    • 步骤2
    • 步骤3
    • 步骤4
    • 步骤5
    • 步骤6
  • react-hot-loader热加载不生效的可能问题
  • 总结

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}/>

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 从零搭建Webpack5-react脚手架的实现步骤(附源码)

    目录 webpack5 正式开始 搭建指南 开始搭建 完成了依赖的准备工作,开始搭建项目 编写webpack.dev.js开发配置 开始编写webpack.prod.js生产配置 编写scripts命令 配置代码质量管控流程 单元测试 webpack5 近期终于有时间和精力专注于公司技术基础建设了,于是一开始,将公司的Saas系统改造成了微前端模式,解决了历史遗留的一部分问题 接着,想着webpack5已经发布这么久了,该在生产环境用起来了,也顺势想推动微前端.webpack5.vite在业内的

  • React+Webpack快速上手指南(小结)

    前言 这篇文章不是有关React和Webpack的教程,只是一篇能够让你快速上手使用目前这两种热门技术的前端指南,并假设你对两者有一个基本的认识.如果你想先行了解下React,可以放肆的移步至 React官方教程,如果你已经使用了其他的模块加载与资源打包技术,不妨也来看看 Webpack提供的思路. webstorm+react+webpack 强烈推荐使用webstorm!.(当然你完全可以使用诸如atom,Sublime之类的编辑器,但之所以选择webstorm是因为它默认支持对react

  • React+TypeScript+webpack4多入口配置详解

    资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包结果目录 │ ├── demo1 //类别demo1的打包结果 │ │ ├── demo1.himl │ │ ├── demo1.js │ │ └── demo1.css │ └── demo2 ... //类别demo2的打包结果 ├── src # 业务资源文件目录 │ ├── category

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

    目录 webpack配置react-hot-loader热加载局部更新 步骤1 步骤2 步骤3 步骤4 步骤5 步骤6 react-hot-loader热加载不生效的可能问题 总结 webpack配置react-hot-loader热加载局部更新 有人会问 webpack-dev-server 已经是热加载了,能做到只要代码修改了页面也自动更新了,为什么在 react 项目还要安装 react-hot-loader 呢? 其实这两者的更新是有区别的,webpack-dev-server 的热加载

  • 详解webpack2+node+react+babel实现热加载(hmr)

    详解webpack2+node+react+babel实现热加载(hmr)

    前端工程化开发的一个重要标志就是热替换技术,它大大的提高开发效率,使我们专注于写代码,webpack2中的热替换相比较1更加简洁. 1. 先看效果 2.目录结构 3.项目目录结构文件描述 bin 执行文件 node_modules node包 public 静态资源文件 static 静态资源 dist 编译后文件 src 项目js文件 .bablrc babel配置文件 webpack.config.dev.js开发模式webpack配置 webpack.config.pro.js生产模式we

  • 基于webpack-hot-middleware热加载相关错误的解决方法

    错误1:找不到__webpack_hmr GET http://127.0.0.1/__webpack_hmr 404 (Not Found) 在webpack的entry配置添加引用路径'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=10000&reload=true',相关的参数最好不要省略,否则会出现无法自动刷新的问题. 处理脚本如下: // 准备webpack配置信息 let hotMiddlewareScrip

  • webpack中的热刷新与热加载的区别

    webpack非常的强大,合理的脚手架可以为我们的工作省去众多繁琐无意义的工作.其中热刷新.热加载相较于传统开发大大提高了开发节奏. 从脚手架发现热刷新.热加载的差异 相信大部分的vue开发者都是从vue-cli开始的,很多初学者欢快的跑着vue项目却不敢改随意改变vue-cli的配置(毕竟webpack确实很复杂,vue-cli也做了很多工作来优化初学者的体验). 相比之下react没有提供一个比较健壮的脚手架了(至少没有明显地被我找到,望赐教).据我知一个是yeoman的 generator

  • webpack实现热加载自动刷新的方法

    webpack实现热加载自动刷新的方法

    本文介绍了webpack实现热加载自动刷新的方法,分享给大家,具体如下: 一.webpack-dev-server 一个轻量级的服务 功能:修改代码及时呈现到浏览器上. 第一步:安装 npm install webpack-dev-server -g 第二步:写入到依赖 npm install webpack-dev-server --save-dev 第三步:修改webpack配置文件 module.exports = { entry:"./js/index.js", output:

  • 关于Webpack dev server热加载失败的解决方法

    利用Webpack dev server作为热加载服务器时,出现以下错误: XMLHttpRequest cannot load http://localhost:8080/dist/06854fc8988da94501a9.hot-update.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not

  • 详解关于webpack多入口热加载很慢的原因

    之前为公司搭建了套webpack多页面应用脚手架,起初用得挺爽,资源整合打包,组件化开发,各种组件复用,需要什么就拿什么,后来入口有50个页面了,慢慢的发现了每次按保存后的热加载等待时间越来越长,需要等待10几秒,实在太影响开发效率,于是我查找原因. 观察发现,每次到热加载时会在emitting HtmlWebpackPlugin这停留很久. 于是我想知道它到底停留了多长时间呢? 在package.json内加入--profile,它会告诉你编译过程中哪些步骤耗时最长. 停止npm,重新运行we

  • 详解Angular6 热加载配置方案

    Angular6 热加载配置方案,分享给大家,具体如下: 示例 ng 版本如下 : $ ng --version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | | / ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | | /_/ \_\_| |_|\__, |\__,_|_|

  • IDEA配置静态资源热加载操作(Springboot修改静态资源不重启)

    第一步: 修改file->settings->compiler->build project automatically 第二步: 按ctrl+shift+a,搜索Registry双击进去,点击面板搜索running,勾选下面的值: 代码的热加载可以使用spring-boot-devtools,百度下就有很多,个人感觉不好用,修改代码需要重启项目,很烦,非常鸡肋,所以我不用,哈哈哈- 补充知识:idea实现修改html等springboot下static目录静态资源重新加载 对于前后端不

  • Kubernetes中Nginx配置热加载的全过程

    Kubernetes中Nginx配置热加载的全过程

    目录 前言 使用方法 总结 前言 Nginx本身是支持热更新的,通过nginx -s reload指令,实际通过向进程发送HUB信号实现不停服重新加载配置,然而在Docker或者Kubernetes中,每次都需要进容器执行nginx -s reload指令,单docker容器还好说,可以在外面通过exec指定容器执行该指令进行热加载,Kubernetes的话,就比较难受了 今天介绍一下Kubernetes中Nginx热加载配置的处理方法——reloader reloader地址:https://

随机推荐