代码拉取完成，页面将自动刷新
简单来说，热更新一般是指手机里的app有小规模更新，以直接打补丁的形式更新。 相对应的，另一种更新方式就是下载新的安装包，重新安装。 所以热更新在手游里头是比较常见的，毕竟游戏应用个个都几百兆起步。
按上面那个说法，Web应该是不存在热更新的。 因为网页的架构是B/S，即 浏览器+服务器 ， 它不像手机app一样是 C/S 客户端+服务器 所以在网页这一块是无法推送补丁让浏览器去更新的。
网上大多数前端热更新讲的都是热加载 hot-loader 或者是模块热更替 HMR
所以大概流程就如下：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open",
"server-hot": "webpack-dev-server --hot"
},
// 本地开发服务器
devServer: {
// 本地服务器加载资源所在路径
contentBase: "./public",
// true 表示所有跳转都是index.html
historyApiFallback: true,
// 当源文件修改时，自动刷新页面
inline: true,
// 端口号，若不设置，默认为8080
port: 3000,
},
所以我们在webpack-demo目录下，运行npm run server就等于运行了webpack-dev-server --open
这样我们就启用了webpack-dev-server但是我们配置项没有配置启用HMR
所以当你修改了文件时，它只是重新打包了，并通知浏览器重载一遍页面。
$ npm run server是我执行的命令，根据package.json 配置文件这个命令等同于webpack-dev-server --open
下面那些输出语句，一些是webpack-dev-server启用状态，还有webpack的打包文件的打包过程
module.exports = {
// 入口文件
entry: __dirname + "/app/main.js",
// 输入文件
output: {
// 输出路径
path: __dirname + "/public",
// 输出文件名
filename: "bundle.js"
},
/app/main.js文件// ES6导入模块的语法，所以入口文件跟下面两个文件有关联
import hello from "./hello";
import "./main.css";
// 简单的DOM操作
document.querySelector("#root").appendChild(hello());
/app/hello.js文件import style from "./style.css";
// 下面这个是CommonJS的文件导入，因为node.js本身是支持CommonJS的
let test = require("./test.json");
// 这个是CommonJS的模块导出
module.exports = function () {
let hello = document.createElement('div');
hello.textContent = test.hhh;
// 这里的hello这个元素的class的取值是来自上面导入"./style.css"文件，这涉及到CSS模块
hello.className = style.hello;
return hello;
};
/app/main.css文件body{
color: blue;
font-size: 64px;
}
/app/style.css文件.hello{
color: red;
}
/app/test.json文件{
"hhh":"this a message from .json"
}
index.html文件<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack demo</title>
</head>
<body>
<div id="root">
</div>
<script src="bundle.js"></script>
</body>
</html>
这样应该很清晰了吧
首先入口文件main.js引入了hello.js和main.css
然后hello.js又引入了style.css和test.json
所以上面这些与入口文件有直接联系或间接联系的文件都会通过webpack去打包，输出为一个bundle.js
而index.html是引用了bundle.js文件的，所以就出现了这个效果。
main.css文件body{
color: blue;
/* font-size: 64px; */
}
你会看到终端webpack在重新打包，打包完后浏览器自动刷新了页面，然后字体变成默认大小
$ npm run server-hot
同样修改main.css文件，我们会发现字体大小变了，可是浏览器并没有刷新，而且发现改一次就多一个js文件，页面只是局部刷新
style.css这个文件，它的结果是会重新加载页面，为什么呢？因为style.css这里头用到了CSS模块的东西，所以没办法说直接打个补丁就能搞定。热加载这个东西，首要就是靠服务器与浏览器之间的通信，有了通信才能通知浏览器什么时候去刷新，而刷新又分全局和局部，这个要看服务端改了哪些代码文件，而这些文件如果可以局部刷新就局部刷新，不行的话就只能重新加载页面了。
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。