(一)热模块替换/热更新(Hot Module Replacement)
作用:
- 方便调试css,页面不会刷新
- js 哪个模块更改了,局部更改那个模块,页面不刷新
比如:在开发的时候,背景颜色是红色,然后我又改成了绿色,改好后,希望修改的元素背景直接由红色变为绿色,不要刷新整个页面,这时候就要用到 webpack 的热更新(HMR),需要在项目中配置。希望页面原素依旧存在,仅仅是css样式发生改变,这时候就到了使用HMR的时候。
(1)HMR 需要用到 HotModuleReplacementPlugin 这个插件,这个插件是 webpack 自带的插件,首先引入webpack
(2)在 devServer 中配置 hot 为 true
(3)在 plugins 中配置上HMR的插件
好了,这样热更新的配置关于 css 改动不刷新页面就配置好了,可以自己试一下
信号就是页面一渲染:network - work - Doc 就会请求 localhost, 当我清空,把red改为green,看看 Doc 有没有重新请求 localhost就可以验证了,验证确实没有重新刷新页面
js: entry 入口js
import './index.css'
var dom = document.createElement('div')
document.body.appendChild(dom)
index.css:
div {
width: 300px;
height: 300px;
background-color: red; // 验证时更改了这个
}
css 更改不刷新页面搞定!
下面再来配置js: js 要通过HMR实现的结果是,在同样不刷新页面的情况下,哪个模块更改了,只重新加载哪个模块,其他模块不需要重新加载
例子:
noChange.js:
export default function noChange () {
var dom = document.getElementById('app')
dom.innerHTML = 2200
}
number.js:
export default function number () {
var count = 0
var dom = document.createElement('div')
dom.innerHTML = count
dom.onclick = function () {
count++
dom.innerHTML = count
}
document.body.appendChild(dom)
}
index.js
import number from './number.js'
import noChange from './noChange.js'
number()
noChange()
// 如果开启了热更新
if (module.hot) {
module.hot.accept('./noChange', () => { // 当noChange文件代码变化了 执行回调函数的内容
noChange()
})
}
这样就可以 改变 #app的内容,不刷新页面,页面还能留住number点击的数字
(二)小疑问:css 为什么什么都不用额外配置,自动就生效了呢,js 还需要 module.hot.accept 呢?
css文件我们会配置css-loader
,css-loader
中已经增加了module.hot.accept
的支持,所以即使不配置module.hot.accept
,对于css也可以HMR,但是如果JS没有调用module.hot.accept
,HMR执行找不到对应的内容,则会直接刷新页面,可以设置参数hotOnly: true
来防止自动刷新
(三)总结:
HMR(Hot Module Replacement),添加、修改模块(修改JS/CSS)后浏览器内容通过非刷新的方式自动更新,提高开发效率,要注意HMR只应在【开发环境】使用
HMR在配置成功以后,修改CSS/JS不会进行页面刷新(注意保存文件变更的时候,浏览器Tab页是否是自动刷新)
HMR配置有四个关键点:
- 使用
webpack-dev-server
作为服务器启动webpack.config
的devServer
中配置hot: true
webpack.config
的plugins增加HotModuleReplacementPlugin
- 使用
module.hot.accept
增加HMR代码
好了 完结撒花~