webpack中的热模块替换（Hot Module Replacement）--- HMR
例如：当页面中有一个button按钮，点击新增列表，当我改变列表每一项的颜色时，Webpack就会帮你刷新浏览器，此时页面上的列表已经清空，那么怎么才能让它只替换颜色，而不刷新页面呢？
1.找到webpack.config.js文件
//引入webpack插件
const webpack = require('webpack');
devServer:{
open:true,
port:8888,
//开启webpack的Hot Module Replace
hot:true,
//即便是热模块替换没有生效，浏览器也不会自动刷新
hotOnly:true,
},
......,
plugins:[
newHtmlwebpackPlugin({
template:'stc/index.html'
}),
new CleanWebpackPlugin(['dist']),
//使用webpack的热模块替换插件
new webpack.HotModuleReplacementPlugin()
]
2.重新运行
这时候我们就可以看到，当我们改变页面的css时，页面并不会刷新。
例如：当我的页面上有两个引入的模块时，修改一个模块的内容，让仅修改过的那个模块发生改变，不要刷新页面，但是这时候我们就会发现，页面是没有刷新，但是模块也没有修改
自己在js中配置一段代码
import counter from './counter';
import number from './number';
counter();
number();
//如果热模块开启，那么当文件发生变化时，重新调用执行
if(module.hot){
module.hot.accept('./number',()=>{
//获取到之前的元素，把它删除
document.body.removeChild(document.getElementById('number'))
number()
})
}
为什么css修改时不需要自己写一个功能代码呢？
这是因为css-loader已经帮你做好这个事情了，vue中也是同样帮你处理好了。
