webpack4 热更新配置

可能没学过webpack的童鞋也知道热更新这个词
这个概念和ajax有点类似 就是我们每次更改代码之后 webpack是局部刷新界面 而不是整个页面刷一下
之前我们使用webpack-dev-server 我们修改代码就是整个页面刷新
这次我们就来配置一下 让webpack支持热更新
还是废话少说直接上代码了

const webpack=require('webpack'); //引入ｗｅｂｐａｃｋ
plugins:[   // 在plugins属性上添加 支持热更新插件
		new webpack.NamedModulesPlugin(),
		new webpack.HotModuleReplacementPlugin()
]

然后就是入口文件中添加 代码

if(module.hot){
	module.hot.accept('./util.js',()=>{
		let str=require('./util');
		console.log(str.default);// 导入的文件 数据 在 default里面
	})
}

大概意思就是 判断模块支持热更新吗 如果支持的话
引入的util.js文件 如果里面的代码发生变化 只是局部更新 页面效果 并不会导致整个页面刷新了
大大优化了我们的开发体验

生活那么苦,为啥不给自己一颗糖吃呢！坚持下去!你会看到不一样的风景！