HMR
09-1'25"
Hot Module Replacement（模块热更新），webpack-dev-server 支持 HMR，在 webpack.config.js 配置中开启
devServer: {
hot: true
},
框架里的 HMR
- Vue：配置 vue-loader 内置插件
VueLoaderPlugin - React：安装配置
ReactRefreshWebpackPlugin
原理
服务端的更新要通知到客户端，所以基于 WebSocket 协议。
基本概念：
- Webpack-complier ：webpack 的编译器，将 JavaScript 编译成 bundle（就是最终的输出文件）
- HMR Server：将热更新的文件输出给 HMR Runtime
- Bundle Server：提供文件在浏览器的访问，也就是我们平时能够正常通过 localhost 访问我们本地网站的因
- HMR Runtime：开启了热更新的话，在打包阶段会被注入到浏览器中的 bundle.js，这样 bundle.js 服务器建立连接，通常是使用 websocket ，当收到服务器的更新指令的时候，就去更新文件的变化
- bundle.js：构建输出的文件
更多
参考：