Webpack 热更新HMR详解与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Celester_best/article/details/121897247

本文介绍了Webpack的热更新（HMR）功能，包括不开启热更新时的js和样式文件情况，以及如何开启和配置HMR，特别讨论了js文件和HTML文件在热更新下的行为。HMR能提高构建速度，但HTML文件的热更新可能导致项目整体重新加载，而非仅更新变动部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先附上测试代码进行说明

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;

css和style文件依然是前面文章中的样式，在这就不再重新粘贴。

不开启热更新的状况

js文件的情况

不开启热更新时，我们修改print.js中的代码时，会导致整个页面全部都重新加载。

样式文件的情况

不开启热更新时，修改css中的样式时，页面会自动刷新，并且只会刷新被修改的样式文件。

可以看到没有开始热更新时，css等样式文件也已经满足了热更新的需求。这是因为style-loader已经实现了热更新功能。我们现在就集中来说说html和js的热更新。

热更新HMR

HMR：hot module replacement 热模块更新/热模块替换

作用：一个模块发生变化，只会重新打包这一个模块，而不是打包所有模块。极大提升构建速度。

如何开启HMR热更新功能

在devServer的配置中添加hot:true

    devServer: {
        // 项目构建后的路径，也就是代码要运行的项目目录
        static: resolve(__dirname, 'build'),
        //compress是否启动gzip压缩，让代码体积更小，速度更快
        compress: true,
        // 指定开发服务器的端口号
        port: 3000,
        // open是否自动打开浏览器，打开的是默认浏览器。
        open: true,
        // 开启HMR功能
        hot: true
    }

js文件热更新

js文件的热更新需要在入口文件index.js中通过HMR监听其他文件的变化

//module.hot为true,说明开启了HMR功能。
if (module.hot) {
    module.hot.accept('./test.js', function () {
        // module.hot.accept这个方法会监听test.js文件的变化，一旦发生变化，其他模块不会重新打包构建,会执行后面的回调函数
        // 需要将关键性的函数再重新执行一遍
        test()
    })
}

测试：修改test.js