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的API文档中了解到，我需要使用module.hot.dispose()和module.hot.data，但我找不到如何做的示例，并且文档没有详细说明。有人可以帮我吗？

（这篇文章类似，但代码与Angular纠缠在一起，不容易理解...另外，这个线程说“如果你想保留状态，请使用dispose和module.hot.data，不要使用accept”？）

- Leedehai

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 ----------------------------------
}

- Leedehai

---

似乎只有在修改依赖于此模块的其他模块时，才会调用addDisposeHandler。当热更新由对不同文件的编辑触发时，如何传递状态？ - mpen