webpack热更新和自动刷新

什么是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中即可：

另外说下我遇到的问题：

今天我的页面的自动刷新一直没生效，我以为是配置和包的问题，然后试了好久都没发现原因，后面发现是因为我这个页面有7个接口一直在那里挂着，然后代码修改编译后，页面会请求热更新模块（下图所示），但在谷歌浏览器下http1.1同一个Host最多允许6个TCP连接，这就导致热更新请求一直挂着，所以页面没有自动刷新！

TIM截图20200429163817.png