什么是webpack更新？
模块热替换（HMR - Hot Module Replacement）是 webpack 提供的最有用的功能之一。它允许在运行时替换，添加，删除各种模块，而无需进行完全刷新重新加载整个页面，其思路主要有以下几个方面
- 保留在完全重新加载页面时丢失的应用程序的状态
- 只更新改变的内容，以节省开发时间
- 调整样式更加快速，几乎等同于就在浏览器调试器中更改样式
怎么启用热更新？
HMR的启用十分简单，这归功于webpack内置插件使用上的便利。我们要做的仅仅是更新webpack-dev-server的配置，和使用webpack内置的HMR插件
第一种方法：webpack配置形式
1.引入webpack库
2.使用new webpack.HotModuleReplacementPlugin()
3.设置devServer选项中的hot字段为true
第二种方法：node命令行形式
webpack-dev-server --hot
启用自动刷新
webpack-dev-server有两种模式支持自动刷新:
- iframe模式
- inline模式
iframe模式
页面是嵌套在一个iframe下的，在代码发生改动的时候，这个iframe会重新加载。
使用iframe模式无需额外的配置，只需在浏览器输入 http://localhost:8080/webpack-dev-server/index.html ，显然webpack-dev-server默认的模式就是iframe
inline模式
的webpack-dev-server客户端会作为入口文件打包，会在后端代码改变的时候刷新页面。配置方式有两种：CLI配置和通过Node.js Api手动配置
CLI 方式
"scripts":{
"start":"webpack-dev-server --inline --config webpack.config.dev.js"
}
Node.js Api方式:
- 第一种方案：将webpack/hot/dev-server配置到所有webpack入口文件中
var config = require("./webpack.config.js");
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {...});
server.listen(8080);
- 第二种方案：将webpack-dev-server客户端脚本插入到html中即可：
<script src="http://localhost:8080/webpack-dev-server.js"></script>
另外说下我遇到的问题：
今天我的页面的自动刷新一直没生效，我以为是配置和包的问题，然后试了好久都没发现原因，后面发现是因为我这个页面有7个接口一直在那里挂着，然后代码修改编译后，页面会请求热更新模块（下图所示），但在谷歌浏览器下http1.1同一个Host最多允许6个TCP连接，这就导致热更新请求一直挂着，所以页面没有自动刷新！
TIM截图20200429163817.png
网友评论