Dev Server 自动刷新会导致页面的状态或者输入的某些值丢失。使用热替换则只将修改的模块实时替换到应用中。
如何开启
webpack-dev-server 已经集成了 HMR,在运行时加上 “—hot” 即可。或者也可以通过配置文件开启。
// webpack.config.js
const webpack = require('webpack')
devServer: {
hot: true
},
plugins: [
new webpack.HotModuleReplacementPlugin()
]
CSS 文件可以实现热替换,但是 JS 仍然会触发自动刷新, 因为 JS 导出的对象没有规律,Webpack 无法处理无规律的对象。所以 JS 文件需要根据实际情况处理更新后的逻辑。module.hot.accept 用于手动处理模块更新的逻辑,加上这个的话,不会再触发自动刷新。module.hot.accept 接收两个参数,第一个是模块路径,第二个是处理逻辑的函数。module.hot.accept 也可以处理图片模块。
// ============ 以下用于处理 HMR,与业务代码无关 ============
// console.log(createEditor)
if (module.hot) { // 如果开启了 HMR 的话,当 hot 或 hotOnly 为 true 的时候,就是开启了 HMR
let lastEditor = editor
module.hot.accept('./editor', () => {
//...
})
module.hot.accept('./better.png', () => {
//...
})
}
hotOnly
hot 属性的缺点是当一个组件或处理逻辑的函数发生运行错误的时候,webpack 会转而自动刷新页面,把错误信息刷掉。这种情况可以配置 hotOnly 属性。这样即使发生错误,也不会刷新页面,错误信息也能被看到。
devServer: {
hotOnly: true // 只使用 HMR,不会 fallback 到 live reloading
},