webpack的热加载（react）_webpack是热加载吗?-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44956861/article/details/104573669

本文详细介绍如何在React项目中配置和实现热模块更新(HMR)，包括webpack配置、React-Hot-Loader插件安装及使用，确保代码修改后无需刷新页面即可看到效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、热加载

热加载是在webpack-dev-server中启用的，我们默认情况下的webpack-dev-server是全局刷新页面的，启用热加载后即可对你修改的模块做一个替换，不会重新刷新页面。

二、需要做的配置

1.在webpack.config.js中（只放需要更改的配置）

（1）devServer中的配置

devServer:{
 hotOnly:false,            //只允许热模块更新 但是启用后浏览器无法自动刷新
        hot: true,               // 启用热模块
        port:3000,              //默认端口号
        open:true,               // 是否自动打开浏览器
    },

上面配置只建议hot:true即可 hotOnly不做设置

（2）plugins的配置

`const webpack=require('webpack');`` //记得开头引入
.......我是其他代码
 plugins:[
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
        }),
    ],

使用webpack.HotModuleReplacementPlugin
记得这里的webpack在webpack.config.js中的开头引入

2.需要安装的插架

npm install React-Hot-Loader --save-dev // 需要在react中使用即需要此插件

额外注意：React-Hot-Loader: react-Hot-dom patch is not detected. React 16.6+ features may not work

3.在react中的修改

（1）在入口文件index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'



ReactDOM.render( <App />, document.getElementById('app'));

if (module.hot){
    module.hot.accept(function (res) {
        console.log("执行了")
        res()
    })
}

这里的module.hot是为了告诉 webpack 去接受这个已更新的 module，经个人测试但即使不做这个module也可以实现react的热更新，这里我在网上也没有找到具体的原因

（2）App.js文件下

import React, { Component ,Suspense, lazy} from "react";
import {hot} from 'react-hot-loader' //这里是我们刚刚安装的hot


class App extends Component {
    constructor(props) {
        super(props)
    }

    render() {
        return ( <div><p>要加油好好学习啊</p></div>);
    }
}

export default hot(module)(App); //hot的使用