react项目配置react-hot-loader

最新推荐文章于 2024-03-26 10:00:38 发布
最新推荐文章于 2024-03-26 10:00:38 发布
阅读量1.9k 收藏 2
点赞数
分类专栏： react实践 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41899420/article/details/109601072
版权

前言

    本人想在react项目中配置react-hot-loader，在网上借鉴了众多网友的经验，却始终找不到门路。最终，有幸在Github上找到了能成功运行的react搭配react-hot-loader项目。参考这一项目，我成功配置了react-hot-loader。
注：仅在此分享能成功配置react-hot-loader的一种方法，不涉及原理分析及扩展方案。

一、react-hot-loader是什么？

    react-hot-loader是一款Webpack的插件。当在编辑react组件的时候，使用react-hot-loader可以让程序在不丢失状态的情况下实现实时刷新。
    react-hot-loader的官方介绍：react-hot-loader官方地址

二、配置方法

在根目录下配置三个文件。

1.package.json文件

    在已有package.json文件里添加如下配置。可以依据自己的环境选择配置，但注意react-hot-loader、babel系列、webpack、webpack-dev-server的版本要对应起来。
    修改package.json后，node控制台输入npm i下载依赖。

{
  "scripts": {
    "dev": "webpack-dev-server --hot --history-api-fallback --open"
  },
 "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.1",
    "@testing-library/user-event": "^12.2.0",
    "css-loader": "^5.0.1",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "web-vitals": "^0.2.4"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-proposal-object-rest-spread": "^7.3.2",
    "@babel/plugin-transform-classes": "^7.2.2",
    "@babel/polyfill": "^7.2.5",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "@babel/runtime": "^7.3.1",
    "babel-eslint": "^10.0.1",
    "babel-loader": "^8.0.5",
    "cross-env": "^5.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "react-hot-loader": "^3.1.0",
    "webpack": "^4.29.3",
    "webpack-cli": "^3.2.3",
    "webpack-dev-server": "^3.1.14"
  }
}

2.webpack.config.js文件

    若项目中没有webpack.config.js文件，则新建此文件。

const path = require('path')

module.exports = {
  devtool: 'source-map',
  entry: {
    'app': [
      '@babel/polyfill',
      'react-hot-loader/patch',
      './src/index'
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      { 
        test: /\.(js|jsx)$/, 
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/syntax-dynamic-import']
        },
        exclude: /node_modules/, 
      },
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        },
    ]
  }
}

3.babelrc文件

    若项目中没有.babelrc文件，则新建此文件并将文件类型改为BABELRC。内容如下：

{
	"presets": [
		"@babel/preset-react"
	],
	"plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-classes",
    "react-hot-loader/babel"
  ]
}

三、应用

    在index.js文件中使用AppContainer

import React from 'react';
import ReactDOM from 'react-dom';
// import reportWebVitals from './reportWebVitals';
import {Provider} from 'react-redux'
import {AppContainer} from 'react-hot-loader'
import Route from './router'
import store from './redux/store.js'
import 'antd/dist/antd.min.css'

const render = Component => {
	ReactDOM.render(
	<Provider store={store}>
		<AppContainer>
			<Component />
		</AppContainer>
	</Provider>,
  document.getElementById('root')
);
}

render(Route);

// reportWebVitals();

if (module.hot) {
  module.hot.accept('./router', () => { render(Route) })
}

在index.html中添加脚本app.js

<!DOCTYPE html>
<html lang="en">

	<head>
		<title>长租公寓平台</title>
		<meta charset="utf-8">
	</head>

	<body>
		<div id="root"></div>
		<script src="app.js"></script>
	</body>
</html>

感想

    react项目依赖的配置比较麻烦，要考虑依赖的功能以及版本兼容性。
    在配置成功后，本人觉得依赖中Babel的版本太低，想换一个版本，未能成功。最后不得已选择最初配置，把自己的要求放在“能用就行”。这是一个遗憾！
（2020/11/15更改博文，参考下面第二个项目，已将babel/core版本更新到7）

参考

    上述的配置文件参考下列项目：
    React Hot Loader Minimal Boilerplate
    react-webpack-babel-hotreload-example
    特此感谢！

斡_lmy
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-loader
04-13
React装载机 react-loader为您的组件提供了一种简单的机制，可在数据加载时呈现加载微调器（通过 ），例如异步请求以加载视图数据。 重要说明：2.x标记的发行版与React 1.4及更高版本兼容。 如果您使用的是旧版本的React，请使用1.x版本。 安装 可通过和通过以下方式使用react-loader： npm install react-loader 或者： bower install react-loader 确保包括--save选项，以将其作为依赖项添加到应用程序的package.json或bower.json文件中。 用法 在React组件的render函数中，将Loader组件包装在您的加载内容周围。 /** @jsx React.DOM */ var Loader = require ( 'react-loader' ) ; var MyCompone
React Ts项目 react-hot-loader 热更新，类型“NodeModule”上不存在属性“hot”
qq_39085895的博客
07-16 988
配置热更新会报：类型“NodeModule”上不存在属性“hot”。 由于使用了ts，在类型检查过程中对于不存在的属性就会抛此种格式的提示，解决方法也很简单，使用as关键字将 module 断言成 any 类型： if ((module as any).hot) { (module as any).hot.accept('./App', () => { const NextApp = require('./App').default; render(NextApp); }) }
如何让react-app-rewired 2支持热加载
KazooTTT的博客
12-22 1043
react-app-rewired 2 如何支持热加载： 使用 react-app-rewire-hot-loader 插件，安装并配置 config-overrides.js 文件，将根组件标记为热更新。 或者安装 react-hot-loader 插件，配置 babel，将根组件标记为热更新。 最新的框架已经支持热更新，不需要手动配置。
探秘React Loadable：优化你的React应用加载速度
gitblog_00017的博客
03-26 380
探秘React Loadable：优化你的React应用加载速度 项目地址:https://gitcode.com/thejameskyle/react-loadable React Loadable 是一个轻量级且强大的库，专为提升React应用程序的加载性能而设计。它利用代码分割（Code Splitting）的概念，将你的应用程序按需加载，从而显著减少初始加载时间，改善用户体验。 什么是Re...
react项目配置react-hot-loader实现模块热更新
追风Programer的博客
03-26 8279
今天我们来聊一聊react的模块热更新，熟悉react的同学都知道，使用官方的脚手架，当我们改动页面时，整个页面会被刷新，那我们当然希望页面只刷新我们改动的部分而不是刷新整个页面，那么怎么做到如此呢？千呼万唤始出来，react-hot-loader就是来完成这个伟大的使命的。 1. 安装react-hot-loader npm i react-hot-loader --save 2. 在开...
react使用react-hot-loader实现局部热更新
przlovecsdn的博客
08-16 9851
Q：webpack-dev-server 已经是热加载，为何还要在 react 项目还要安装 react-hot-loader 呢？ A：其实这两者的更新是有区别的，webpack-dev-server 的热加载是开发人员修改了代码，代码经过打包，重新刷新了整个页面。而 react-hot-loader 不会刷新整个页面，它只替换了修改的代码，做到了页面的局部刷新。但它需要依赖 webpack ...
webpack配置react-hot-loader热加载局部更新
这个昵称没有被占用吧的博客
02-12 3769
csdn的收藏有点鸡肋，只好以博客的形式记录下来。 原文地址：https://blog.csdn.net/huangpb123/article/details/78556652 我们知道webpack-dev-server已经是热加载了，能够做到只要代码修改了页面就自动更新，那么为什么在react项目中还要安装react-hot-loader呢？两者有什么区别呢？webpack-dev-serve...
react-loaders:快速从远程JS包加载和渲染React组件！
05-01
React装载机！ 一组实用程序组件，可远程加载React组件和JS脚本 演示和文档 此处提供在线演示和组件参考： : 由提供支持的演示 安装 npm install @opuscapita/react-loaders 贡献者 基里尔·沃尔科维奇（Kirill Volkovich） 执照 根据Apache许可，版本2.0许可。 有关完整的许可证文本，请参阅LICENSE 。
react-hot-export-loader:一个Webpack加载器，自动插入react-hot-loader代码，灵感来自react-hot-loader-loader
05-15
一个Webpack加载器，自动插入react-hot-loader代码，灵感来自 跳过未导出到React组件的资源，在process.env.NODE_ENV时不执行任何操作 安装 npm install react-hot-loader --save-dev npm install react-hot-...
react+redux + react + react-hot-loader
01-24
一个全功能的 React.js 应用 demo 或模板 # 安装依赖 yarn # 代码检查 npm run lint # 代码检查并自动修复 npm run fix # 本地开发 npm run dev # 生产构建 npm run build # 代码分析 npm run analyze
react-hot-loader-loader：一种Webpack加载程序，可自动将react-hot-loader插入您的App中
02-06
React热加载器一个Webpack加载程序... 例： 用法安装npm i react-hot-loader-loader在您的Webpack配置中，添加以下加载器： { test : / \/ App \. js $ / , // regex to match files to receive react-hot-loader funct
react-hot-loader：实时调整React组件。 （不建议使用：改为使用快速刷新。）
02-21
React热加载器 实时调整React组件 :atom_symbol_selector: :high_voltage: 观看。 迈向下一步 React-Hot-Loader一直是您的友好邻居，住在React之外。 但是它一直在限制自己的力量，并没有带来最大的经验。 现在是下一步。 预计React-Hot-Loader将被取代。 如果您的环境当前支持快速刷新，请删除React-Hot-Loader。 React Native自0.61开始。 parcel 2自alpha 3开始。 webpack使用插件。 other bundler -尚不支持，请使用React-Hot-Loader 安装 npm install react-hot-loader 注意：您可以安全地将react-hot-loader作为常规依赖项而不是dev依赖项进行安装，因为它可以自动确保它不在生产中执行并且占用空间最小。 入门 将react-hot-loader/ba
react-在ReactWebpack中用来配合cssloader模块中的modules使用
08-14
在React Webpack中，用来配合css-loader模块中的modules使用
React Hot Loader:实时调整React组件-开源
05-15
React Hot Loader是一个插件，允许实时重新加载React组件而不会丢失状态。 它可与同时支持Hot Module Replacement（HMR）和Babel插件的Webpack和其他捆绑软件一起使用。 HMR允许我们在不重新启动服务器的情况下就地更换模块。 这是为不同的捆绑器启用它的方法。 将React Hot Loader与Webpack一起使用的最简单，最快的选择是将webpack-dev-server与--hot CLI选项一起使用。 如果仅在客户端上渲染，但必须使用一些自定义节点服务器，这仍然是一个简单的选择。 您可以简单地将server.js从官方样板复制到您的项目中。 配置的重要部分是，当您创建新的WebpackDevServer时，需要指定hot：true作为选项。
react-scripts-hot-reloading-raw-loader
05-25
热加载原始加载器内容的v4回归 // eslint-disable-next-line import/no-webpack-loader-syntaximport html from '!raw-loader!./example.html'document . body . innerHTML = html 更改example.html会触发react-...
react-hot-loader-demo
05-17
这是一个简单的应用程序，实现了react-hot-loader插件，并演示了如何在实时重载期间使用它来保存应用程序的状态。
Concis组件库封装——Loading加载中
量子前端的博客
06-22 1899
一个常规的react loading组件的开发和测试
infrared-remote-candroid studiodemo
最新发布
05-05
android studio下载
@pmmmwh/react-refresh-webpack-plugin 如何配置 webpack
05-31
@pmmmwh/react-refresh-webpack-plugin 是一个用于 Webpack 的插件，用于实现 React 组件的无需刷新热更新。要在 Webpack 中配置该插件，您需要执行以下步骤： 1. 安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh 包，可以使用 npm 或 yarn 命令进行安装： ```bash npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev ``` 或 ```bash yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh --dev ``` 2. 在 Webpack 配置文件中，导入插件和 ReactRefreshWebpackPlugin： ```javascript const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); ``` 3. 将 ReactRefreshWebpackPlugin 插件添加到 plugins 数组中： ```javascript plugins: [ new ReactRefreshWebpackPlugin() ], ``` 4. 如果您使用的是 TypeScript，则需要在 ts-loader 选项中添加 react-refresh-typescript： ```javascript module: { rules: [ { test: /\.tsx?$/, use: [ { loader: 'ts-loader', options: { getCustomTransformers: () => ({ before: [require('react-refresh-typescript')()] }) } } ], exclude: /node_modules/ } ] } ``` 5. 在 devServer 中启用 hot 和 hotOnly 选项： ```javascript devServer: { hot: true, hotOnly: true } ``` 完成以上配置后，您就可以使用 @pmmmwh/react-refresh-webpack-plugin 实现 React 组件的无需刷新热更新了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值