热加载主要是在开发过程中，当修改代码后，在不刷新整个页面的情况下，将新的打包代码加载到正在运行的应用程序中。它侧重于实时更新代码，让开发者能够快速看到代码修改后的效果。它会在浏览器和服务器之间建立一个Websocket连接。当代码发生变化时，Webpack 会重新编译发生变化的模块。然后，服务器端通过这个 Websocket 连接，将新的模块代码发送到浏览器端。浏览器端的热加载模块会接收这些新代码，并将其应用到正在运行的应用程序中，替换掉旧的模块代码，局部重绘，尽量保持组件状态，dom结构不变，只会改变更新页面的组件状态，只要更新没有影响到用户使用的页面，就不会影响用户体验热重载是一种更高级的代码更新机制，它不仅能够更新代码，还能够在更新代码的同时，重新初始化和更新相关的组件、模块或者应用状态。与热加载相比，热重载更强调对整个应用状态的重新构建和更新,重新计算布局，初始化状态，会重新构建和渲染受影响的组件,适用于更深层次地更新，可能会重排，会消耗更多时间、资源，可能会丢失临时填写的数据，影响用户体验,但对组件的更新更全面，可以通过热监听，保持数据不变
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
publicPath: '/'
},
port: 8080,
// liveReload: true,
hot: true,
open: true,
historyApiFallback: true,
},
hot: true启动热加载liveReload: true重新加载页面，不是真正意义的热重载，它不涉及对应用中组件、模块的智能更新和状态的精细化管理
"hotWebpack":"webpack serve"
通过npm run hotWebpack 启动
