webpack-dev-server:如何使用module.hot.data保持状态

Question

我正在使用webpack-dev服务器的热模块替换(HMR(。在代码中，我有这样的：

// index.js
// ...
window.enableFoo = false; // can set this to 'true' in DevTools console
if (module && module.hot) {
module.hot.accept((err) => {
console.error('HMR accept() error: ' + err);
});
module.hot.addStatusHandler(status => {
if (status === 'apply') {
console.log('HMR: update applied');
}
});
}

我想在HMR更新期间保留window.enableFoo。但是，每次应用更新时，window.enableFoo都会返回到代码中设置的原始值，此处为true。

我从HMR的API文档中了解到我需要使用module.hot.dispose()和module.hot.data，但我找不到如何做到这一点的示例，文档也没有详细说明。有人能帮我吗？

(这篇帖子很相似，但代码与Angular纠缠在一起，不容易理解……而且，这个线程说"如果你想保持状态，请使用dispose和module.hot.data，不要使用accept"？(

Answer 1

经过挖掘，这段代码就可以工作了。我想我最好把它贴在这里，以防有人也在寻找答案。

// index.js
// ...
window.enableFoo = false; // can set this to 'true' in DevTools console
if (module && module.hot) {
module.hot.accept((err) => {
console.error('HMR accept() error: ' + err);
});
module.hot.addStatusHandler(status => {
if (status === 'apply') {
console.log('HMR: update applied');
}
});
// added begin ----------------------------------
module.hot.addDisposeHandler(data => {
data.enableFoo = window.enableFoo;
});
if (module.hot.data) {
window.enableFoo = module.hot.data.enableFoo;
console.log('window.enableFoo ' + window.enableFoo);
}
// added end ----------------------------------
}