Webpack热模块更新

（Hot Module Replacement 简写HMR）

课程目标

1. 什么是热模块更新
2. 热模块更新的有好处

一、什么是热模块更新

则是修改了代码，不会导致刷新，而是保留现有的数据状态，只将模块进行更新替换。

二、热模块更新的配置

>配置
"scripts": {
  "start": "webpack-dev-server",
},
在加热更新之前，我们运行npm run start，会发现之前我们打包有个dist目录，为什么运行这个命令的时候，dist目录没有了。实际上，webpack-dev-server，还是会对src目录下进行打包的。但是打包生成的文件，他并不会放在dist目录下。而是放到电脑中的内存里面。这样的话，可以有效的提升打包的速度。
devServer:{
   contentBase:"./dist',
   open:"true",
   port:"8080,
  //热模块更新的配置
   hot:true,
   hotOnly:true
},
plugins:[
//热模块加载
	new webpack.HotModuleReplacementPlugin()
]，
当我配置了这两项后，我再修改index.js 文件后，他不会刷新我的页面，而是直接修改我的改变的代码

热模块更新的好处

1. 可以在我们写css代码的时候，方便调试css
2. js中的好处： 引入每个模块，想要更改的其中的模块，只更改自己，不会更改其他，对其他无影响。

如下面的代码：

将我配置webpack.config.js中我上面配置的热模块更新的代码，都去掉，除了script中的代码

在index.js，和center.js页面中写入代码
- index.js页：
import  center  from "./center"
import  number from "./number"
number()
center()
- center.js页：
function center（）{
	var div = document.createElement('div')
	div.setAttribute('id','center')
	div.innerHTML = 1
	div.onclick  = function（）{
		div.innerHTML = parseInt（div.innerHTML,10）+1
		
	}
	document.body.appendChild(div)
}
//导出
export default center
- number.js页
 function  number  (){
		var div = document.createElement (‘div’)
		div.setAttribute('id','number')
		div.innerHTML = 1000
	document.body.appendChild(div)
}
export  default  number