块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
保留在完全重新加载页面时丢失的应用程序状态。
只更新变更内容,以节省宝贵的开发时间。
调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。
这一切是如何运行的?
开头引入
webpack自带模块热替换插件(hot module replacement)所以要先引入webpack
const webpack = require('webpack'); //webpack自带模块热替换插件(hot module replacement)所以要先引入webpack
2. devServer引入
3.插件中引入
new webpack.HotModuleReplacementPlugin() //热替换插件
**js热替换**--
js热替换需要对更新文件以下操作,不然浏览器不会因为js文件改变从而重新渲染, 如下图所示,要对number.js进行操作 要加上此代码
if(module.hot) {
module.hot.accept('./number', () => {
document.body.removeChild(document.getElementById('number'));
number();
})
}
accept接受给定依赖模块的更新,并触发一个 回调函数 来对这些更新做出响应。
参数为更新的JS文件
css热更新则不需要这样配置,因为CSS-loader中已经帮我们配置了此代码,而JS中却需要我们自身自己去编写此代码来配