到底什么是浏览器的热更新？(webpack版)

热更新是保存后自动编译吗？
还是自动刷新浏览器？
还是指HMR(模块热替换)?

浏览器的热更新，指的是:

在本地开发的同时打开浏览器进行预览，当代码文件发生变化时,浏览器自动更新页面内容的技术

自动更,表现上分为:

自动刷新整个页面
页面整体无刷新而只更新页面的部分内容

以webpack中的热更新配置为例子:

一切依赖手动

src/index.js

function render(){
div = document.createElement('div')
div.innerHTML = 'Hello World'
document.body.appendChild(div)
}render()
webpack.config.basic.js
module.exports ={
entry:'./src/index.js',
mode:'development'
}
package.json"scripts":{
"build:basic":"webpack --config webpack.config.basic.js "
}

当我们改变原文件的内容，会发现由于构建内容中没有任何对应的处理，自然打包内容没有进行更新，必须手动的进行修改

Watch模式

webpack.config.watch.js

{...
watch:true
...}package.json"script":{
"build:watch":"webpack  --config wabpack.config.watch.js"
}

执行的时候，当发现原文件变更后，会再次执行这个流程

但是有bug

为了看到执行效果，需要在浏览器中进行预览
但是在预览时发现，及时产物文件发生了变化
在浏览器里依然需要手动点击刷新才能看到变更后的效果

Live Reload

为了使代码变更后，浏览器的变更内容能自动显示

webpack.config.reload.js

{...
devServer:{
contentBase:'./dist',  //为.dist目录中的静态页面文件提供本地服务渲染
open:true //启动服务后自动打开浏览器网页
}
...}package.json"scripts":{
"dev:reload":"webpack-dev-server --config webpack.config.reload.js"
}

但是也有bug

在开发调试过程中会在网页中进行一些操作
例如输入了一些表单数据想要调试错误提示的样式，打开了一个弹窗想要调试其中按钮的位置
切换回编译器，修改样式文件进行保存
网页刷新后回到了初始化的状态，不得不再次重复操作才能确认改动后的效果

Hot Module Replacement

 module.exports = {entry: './src/index1.js',mode: 'development',devServer: {contentBase: './dist',open: true,hot: true},module: {rules: [{test: /\.css$/,use: ['style-loader', 'css-loader']}]}
}

可以通过这幅图

到底什么是浏览器的热更新？(webpack版)相关推荐

修改html时webpack热更新,webpack学习之路（二）webpack-dev-server实现热更新
上一章对webpack的配置有了简单的认识. 这一章,我需要学习的是webpack热更新,因为在开发过程中,不希望当文件更改时,人肉去编译文件,刷新浏览器. webpack热更新 webpack-de ...
修改html时webpack热更新,webpack热更新(HMR)
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 一.HMR介绍在我们开发react应用的时候,在配置了webpack-dev-server的前提下每一次的组件内容修改 ...
【Webpack】1047- 轻松理解webpack热更新原理
一.前言 - webpack热更新 Hot Module Replacement,简称HMR,无需完全刷新整个页面的同时,更新模块.HMR的好处,在日常开发工作中体会颇深:节省宝贵的开发时间.提升开发 ...
理解 webpack 热更新
一.开启:HotModuleReplacementPlugin/--hot 二.webpack 编译构建后,控制台出现: 1.新的 hash 值 // 作为下次热更新的标识 2.新的 json 文件 ...
webpack热更新原理-连阿珍都看懂了
前言在旧开发的时代,前端项目在开发的过程中修改代码,很有可能是手动切到浏览器刷新页面来看到改动效果.操作不方便且页面之前的编辑记录也都丢失,体验可以说为0.想象一下一个表达你努力填满了所有输入项,结 ...
webpack (九) -热更新——浏览器不刷新，更新打包后的结果
17-webpack-热更新--浏览器不刷新,更新打包后的结果实现浏览器不刷新,更新打包后的结果,默认对js不生效,对样式生效. https://www.webpackjs.com/guides/h ...
webpack 4 热更新后台成功更新浏览器不刷新
上一篇文章写的是 webpack4 打包,但是每次修改代码都要重新执行一次打包命令,实在是麻烦,本文将推出我的实现,仅做参考!!! 1.安装 webpack-dev-server npm instal ...
webpack和vue热更新
目录 webpack一些概念介绍 webpack热更新流程 1. 启动阶段 ①->②->A->B 2. 更新阶段 ①->②->③->④ vue的组件热更新模块总结 ...
webpack热更新实现
原文地址:webpack热更新实现 webpack,一代版本一代神,代代版本出大神.如果你的webpack和webpack-dev-server版本大于2小于等于3.6,请继续看下去.其它版本就必浪费 ...

到底什么是浏览器的热更新？(webpack版)

到底什么是浏览器的热更新？(webpack版)相关推荐

最新文章

热门文章