可能没学过webpack的童鞋也知道热更新这个词
这个概念和ajax有点类似 就是我们每次更改代码之后 webpack是局部刷新界面 而不是整个页面刷一下
之前我们使用webpack-dev-server 我们修改代码就是整个页面刷新
这次我们就来配置一下 让webpack支持热更新
还是废话少说直接上代码了
const webpack=require('webpack'); //引入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文件 如果里面的代码发生变化 只是局部更新 页面效果 并不会导致整个页面刷新了
大大优化了我们的开发体验
生活那么苦,为啥不给自己一颗糖吃呢!坚持下去!你会看到不一样的风景!