网站搭建备案吗,建设公司内网网站的意义,安徽省住房和建设执业资格注册中心网站,紧急通知网页升级自动访问升级本文#xff1a;参考文章
一、HMR是什么#xff0c;为什么出现
1、出现的原因
之前#xff0c;应用的加载、更新都是一个页面级别的操作#xff0c;即使单个代码文件更新#xff0c;整个页面都要刷新#xff0c;才能拿到最新的代码同步到浏览器#xff0c;导致会丢失…本文参考文章
一、HMR是什么为什么出现
1、出现的原因
之前应用的加载、更新都是一个页面级别的操作即使单个代码文件更新整个页面都要刷新才能拿到最新的代码同步到浏览器导致会丢失之前在页面执行过程中的所有交互状态
2、HMR作用
可以将大多数小改动通过热模替换方式更新到页面上保存一定的交互效果从而确保连续的、顺畅的开发调试
二、HMR应用
1、Vue启动HMR
1搭建vue项目环境
npm install vue在src文件夹下创建main.js文件
import {createApp} from vue
import App from ./App.vuecreateApp(App).mount(#app)在src文件夹下创建component文件夹里创建Helloworld.vue文件
template1/template在src文件夹下创建App.vue文件
templatedivh1Hello Vue 3 with HMR!!/h1p{{ count }}/pinputHelloworld/Helloworld/div
/templatescript
import Helloworld from ./component/Helloworld.vue;
export default {data() {return {count:0};},components:{Helloworld},created(){this.handle setInterval(() {this.count}, 1000);}
};
/script根目录创建index.html文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp/div// 引入main.js文件script src./dist/main.js typemodule/script
/body
/html2下载vue-loader、vue/compiler-sfc、html-webpack-plugin配置webpack.config.js文件 npm i vue-loader配置loader并引入VueLoaderPlugin插件 版本号
vue-loader17.2.2html-webpack-plugin5.5.3vue/compiler-sfc3.3.4webpack5.88.2
const path require(path)
const HtmlWebpackPlugin require(html-webpack-plugin)
const {CleanWebpackPlugin} require(clean-webpack-plugin)
const {VueLoaderPlugin} require(vue-loader)// HMR// import { Configuration } from webpack
/*** type {Configuration}*/
const config {mode:development,entry:./src/main.js,output:{path:path.resolve(__dirname,dist),filename:[name].js},module:{rules:[{test:/\.vue?$/,loader:vue-loader,options:{hotReload:true // 手动可以关闭热更新}}]},plugins:[new HtmlWebpackPlugin({template:./index.html}),new CleanWebpackPlugin(),new VueLoaderPlugin()],devtool:source-map,devServer:{port:8080hot:true // 开启HMR}
}module.exports config最后呈现的效果 开启热更新修改helloworld组件的内容不会整个刷新页面父组件的count值仍是保留 关闭热更新修改helloworld组件的内容会刷新整个页面父组件的count值将会清为0 2、一些零碎的知识点
关于webpack当中的devServer devServer在webpack5的版本用hottrue就可以开启热更新。 devServer启动会根据webpack.config.js配置文件去读取配置主要是读取output.path配置先去对文件进行打包编译在编译之后不会将打包文件输出在dist目录下而是存储在内存当中保证了是挂在server的根路径一样的效果随便去访问。 访问打包后的文件 http://localhost:8080/webpack-dev-server 详细地址 关于vue-loader开启热更新 vue-loader要搭配对应的单文件解析包vue2——vue-template-compiler、vue3——vue/compiler-sfc 正常开启热更新需要保证webpack环境是development模式保证目标target不是node端 vue-loader详细地址
三、HMR的工作原理
1、webpack-dev-server在热更新中做了什么
当运行的时候它会向客户端添加两个文件这两个文件的目的 1、websocket文件用于与服务端进行通信 2、客户端获取到需要更新的模块进行重新执行并更新。
然后它会接着开启两个服务 1、HTTP服务用于客户端去请求获取编译完成之后的代码块 2、WebSocket服务当有模块发生改变并且编译完成用于通知客户端去主动请求新的模块进行热更新
2、更加细节的真实操作 这里以上面跑起来的vue项目为例 服务端端热更新完毕websocket服务将hash2发送给客户端 客户端接受到hash2同时会根据hash1去请求json数据来获取到更新的代码块 服务端对比hash1和hash2返回发生更改的代码块
客户端根据hash1去请求该代码块下更改的模块代码 服务端对比hash1和hash2返回发生更改的模块代码
客户端根据更新的模块代码去更新并执行依赖该模块的代码
