webpack🉑️监听文件变化，当它们修改后会重新编译，可以通过watch模式，这样当我们打包之后，webpack并未退出当前进程，而是继续监控源文件内容是否发生变化，直至用户退出
但是浏览器还是不能配合实时刷新，为了使每次代码变更后浏览器中的预览页面能自动显示最新效果而无需手动点击刷新，我们需要一种通信机制来连接浏览器中的预览页面与本地监控代码变更的进程，我们可以使用webpack提供的开发服务器来实现这一目的。当我们执行npm run dev，浏览器在加载完页面和页面中的js文件后，服务还加载了路径前缀名为/sockjs-node的websocket链接，通过这个websocket链接，就可以使打开的网页和本地服务间建立持久化的通信，当源代码发生变更时，就通过socket通知网页端，网页端在接到通知后会自动触发页面刷新
这样基本实现了热更新，但是还是有些问题，比如下面这个场景：我们在表单中输入了一些数据，然后修改了样式并保存，此时我们返回网页发现之前输入的内容也都刷新没了，所以为了解决页面刷新导致的状态丢失问题，webpack提出了模块热替换
关于整个热更新，主要包含了三个方面的技术：
- 对本地文件内容变更的监控（fs.watch）
- 浏览器网页端与本地服务器之间的
websocket通信(socks-node/socket.io) - 模块解析与替换
其中最重要的就是模块的解析与替换
首先来了解一下webpack的打包流程：
- 一切源代码文件均可通过各种
Loader转换为JS模块，模块之间相互引用 webpack通过入口点递归处理各模块引用关系，最后输出一个或多个产物包js文件- 每一个入口点都是一个块组，在不考虑分饱的情况下，一个块组中止呕一个
chunk,该chunk包含递归分析后的所有模块，每一个chunk都有对应的一个打包后的输出文件
这样源代码中的代码发生变更时，模块热替换插件就会执行对应的方法
