webpack HMR的使用

简介

热模块替换（HMR）：如果一个模块发生变化，只会重新打包这一个模块（而不是所有模块都进行打包），而无需重新加载整个页面。

作用：

• 提高构建速度
• 修改文件时不用刷新页面，能够保持页面状态

启用方式

1. 通过命令参数： webpack-dev-server --hot

2. 通过配置文件：
   webpack.config.js

const webpack = require('webpack')
module.exports = {
	devServer: {
		hot: true,//  热更新失败时刷新浏览器
    	hotOnly: true,//  热更新失败时不刷新浏览器
	},
	plugins:[ new webpack.HotModuleReplaceMentPlugin() ]
}

HMR apis

在webpack的入口文件的module对象中有个hot属性
这个属性就是包含HMR api的核心对象
hot中有个accept函数，用于注册某个模块更新过后的处理函数（参数1）
注册过热更新处理函数的模块更新时不再自动刷新页面

module.hot.accept('./heading.js',() => {
    console.log('./heading.js update');
  })