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

Question

我正在使用 webpack-dev-server 的热模块替换 (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's API doc 中了解到我需要使用 module.hot.dispose() 和 module.hot.data，但我找不到如何执行此操作的示例，文档也没有精心制作的。有人可以帮助我吗？

(this post is similar, but the code is entangled with Angular and not easy to understand... also, this thread 说 "If you want to keep state, use dispose and module.hot.data, don't use 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 ----------------------------------
}