HotModuleReplacementPlugin 作用就是不需要刷新浏览器,就可以看到改动。
devServer:{
conentBase:'./dist',
open:true
proxy:{
'/api': 'http://localhost:3000'
},
//开启HMR
hot:true,
hotOnly:true // HMR失效时,不需要刷新页面
}
//开启HMR
plugins:[
new webpack.HotModuleReplacementPlugin()
]
css文件不需要额外配置 css文件改动时,页面不刷新,但是自动生效。 因为css-loader中做了module.hot.accept
js文件需要额外配置
因为当开启HMR时浏览器不会刷新,所以需要强制执行 改动的文件。
// 当开启HMR,并且number.js文件改动时,只执行number文件
// 其他文件不会执行。
if(module.hot){
module.hot.accept('./number', ()=>{
number();
});
}