一、模块热替换

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：

保留在完全重新加载页面时丢失的应用程序状态。

只更新变更内容，以节省宝贵的开发时间。

调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

模块热替换使用的是 HotModuleReplacementPlugin 插件，在 Webpack4 中需要手动安装和使用，但在 Webpack5 中可以直接使用。

1. 配置

module.exports = {
    devServer: {
        hot: true,    // 默认为 true
    },
}

2. HMR 加载 JS

使用 module.hot.accept，它可以接受两个参数：

文件路径：接受一个文件，当文件发生变化，就会进行热替换；
回调函数：当文件发生变化时调用该回调函数，进行相应操作

如：

import './input.js'

if (module.hot) {    // webpack.config.js 中是否设置了 module.hot
    module.hot.accept('./input.js', () => {
    
    })
}

查看浏览器控制台：

3. HMR 加载 CSS

如果配置了 style-loader，那么同样支持样式文件的热替换功能：

module.exports= {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
        ],
    },
}

CSS 文件不需要手动使用 module.hot.accept，这是因为 style-loader 的实现使用了 module.hot.accept，在 CSS 依赖模块更新之后，会对 style 标签打补丁，从而实现了这个功能。

二、热加载

热加载指的是文件更新时自动刷新服务和页面。

新版的 webpack-dev-server 默认已经开启了热加载的功能，它对应的参数是 devServer.liveReload，默认为 true。如果想要关掉它，要将 liveReload 设置为 false 的同时，也要关掉 hot。

module.exports = {
    devServer: {
        liveReload: false,    // 默认为 true
        hot: false
    },
}

13. 模块热替换与热加载

一、模块热替换

1. 配置

2. HMR 加载 JS

3. HMR 加载 CSS

二、热加载