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

Question

我正在使用 webpack-dev-server 的 Hot Module Replacement (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');
        }
    });
}

我想保留 window.enableFoo跨越 HMR 更新。但是，每次应用更新时， window.enableFoo回到代码中设置的原始值，即 true这里。

我读自 HMR's API doc我需要使用 module.hot.dispose()和 module.hot.data ，但我找不到有关如何执行此操作的示例，并且文档没有详细说明。有人可以帮助我吗？

( this post 类似，但是代码和 Angular 纠缠不清，不容易理解...另外， this thread 说“如果你想保持状态，使用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 ----------------------------------
}