一、热加载
热加载是在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的使用
（3）有可能报错：Maximum call stack size exceeded
原因：是在package.json里的script里使用了–hot和在webpack.config.js里调用了HotModuleReplacementPlugin 导致重复调用的问题
解决方案：删除在package.json里script的–hot即可
参考链接：https://juejin.im/post/5b363b576fb9a00e6f660f45