什么是热更新(HMR)

热更新是webpack提供的一种在运行时实时更新代码和资源的机制。HMR 全称 HotModuleReplacementPlugin ,需要搭配webpack-dev-server使用。

如何使用热更新

安装webpack-dev-server

npm install webpack webpack-dev-server --save-dev

配置 HMR plugins

const webpack = require('webpack');

module.exports = {
    // ...
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

配置 devServer

    devServer: {
        contentBase: './dist',
        hot: true
    }

热更新原理

1. webpack-dev-server 模块会在本地启动 http服务 和 websocket服务。启动http服务，用于提供静态资源访问。启动websocket服务，用于与浏览器双向通信；
2. 在启动webpack服务时，实例化的complier会启动watch方法，监听本地项目文件的变更；
3. 当监听到文件变更时，complier会重新编译，并将编译后的文件输出到内存中；
4. webpack-dev-server 注册了 compiler的 compile.hooks.done 回调事件；在编译完成之后将变更的chunk信息发送给浏览器，通过 bundle.js 中的HMR-runtime来更新浏览器中对应的项目模块。