本文介绍了Webpack的热更新（HMR）功能，包括不开启热更新时的js和样式文件情况，以及如何开启和配置HMR，特别讨论了js文件和HTML文件在热更新下的行为。HMR能提高构建速度，但HTML文件的热更新可能导致项目整体重新加载，而非仅更新变动部分。
先附上测试代码进行说明
html文件
<body>
<div>webpack5学习</div>
<!-- 注释 -->
<div>html压缩</div>
<div class="box1"></div>
<div class="box2"></div>
<div class="img-box1"></div>
<div class="img-box2"></div>
<div class="img-box3"></div>
<img src="./img/react.png" alt="react" />
</body>js入口文件
import '../css/style1.css'
import '../css/style2.less'
import test from './test.js'
console.log('index.js执行了')
test()
function add(a, b) {
return a + b;
}
console.log(add(1, 3))test.js
console.log('test.js执行了')
function test() {
const value = 'hello world 11'
console.log('value: ', value)
}
export default test;
最低0.47元/天 解锁文章
1146
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
