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

我正在使用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类似,但是代码与Angular纠缠在一起并且不易理解...而且,this thread说:“如果要保持状态,请使用dispose和module.hot。数据,不要使用“接受”?)

thickice_1119 回答:webpack-dev-server:如何使用module.hot.data保留状态?

挖掘后,此代码有效。我想最好把它粘贴在这里,以防有人也在寻找答案。

// 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 ----------------------------------
}
本文链接:https://www.f2er.com/3153904.html

大家都在问