4-3 webpack-开发调试必备功能之模块热替换HMR

1.什么是模块热替换

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。主要是通过以下几种方式，来显著加快开发速度：
1）保留在完全重新加载页面时丢失的应用程序状态。
2）只更新变更内容，以节省宝贵的开发时间。
3）调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。

2.具体步骤

1）配置webpack.config.js文件
在module.exports = {}里的devServer中写：

hot:true,

在module.exports = {}里的plugins里面写：

new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),

2）在终端运行npm run start进入html页面，这时，你再改css文件里的样式，就可以不用刷新整个页面而改变页面的css样式。
注意：之前我们是用 extract-text-webpack-plugin 这个插件来处理 CSS 的，在用 HMR 的时候要先把它关闭一下，不然不会生效。
在extract-text-webpack-plugin 配置disable: true或者注释掉这段代码都可以:

new ExtractTextPlugin({
   filename: 'style.css',
   disable: true
}),

如果想在修改js文件时实现热更新，就需要在devServer中加入hotOnly:true
devServer中加入hotOnly表示只有热更新，不会自动刷新页面。
然后在js文件里加入以下代码：

if(module.hot){
	module.hot.accept();
}

这样，当你修改了js文件以后，就能实现js的修改啦，就不用刷新整个页面啦。