1.什么是模块热替换
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
1)保留在完全重新加载页面时丢失的应用程序状态。
2)只更新变更内容,以节省宝贵的开发时间。
3)调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
2.具体步骤
1)配置webpack.config.js文件
在module.exports = {}里的devServer中写:
hot:true,
在module.exports = {}里的plugins里面写:
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
2)在终端运行npm run start
进入html页面,这时,你再改css文件里的样式,就可以不用刷新整个页面而改变页面的css样式。
注意:之前我们是用 extract-text-webpack-plugin 这个插件来处理 CSS 的,在用 HMR 的时候要先把它关闭一下,不然不会生效。
在extract-text-webpack-plugin 配置disable: true
或者注释掉这段代码都可以:
new ExtractTextPlugin({
filename: 'style.css',
disable: true
}),
如果想在修改js文件时实现热更新,就需要在devServer中加入hotOnly:true
devServer中加入hotOnly表示只有热更新,不会自动刷新页面。
然后在js文件里加入以下代码:
if(module.hot){
module.hot.accept();
}
这样,当你修改了js文件以后,就能实现js的修改啦,就不用刷新整个页面啦。