我想订阅或以某种方式检测 React 应用程序中导入的文件更改。仅开发模式需要此功能。
例如,这段导入SVG的代码(我想象它会怎样,但实际上任何其他方式都可以接受)
import myIcon from './myicon.svg';
function IconSet()
{
webpack.hot.reload.detector(myIcon).on('change', function(oldMyIcon, newMyIcon)
{
// Here I can get new myIcon object and process this by myself
// ...
});
}
有什么办法可以做到吗?
谢谢!
AFAIK,热重载不处理单个文件,它总是重新加载整个应用程序。
下面并不完全是您问题的答案,但我正在寻找检测热重载本身。这是谷歌的第一个答案。所以我决定回答其他遇到这个问题的人。
我通过挖掘webpack-dev-server已关闭的问题找到了解决方案。
这个问题,准确来说:
这是重新加载应用程序时将运行的代码。我使用窗口黑客来防止每次重新加载后添加新事件:
if (module.hot) {
if (!window.hot) {
module.hot.addStatusHandler(status => {
if (status === 'apply') {
console.log('reload');
}
});
}
window.hot = true;
}
还有消息事件:
window.addEventListener('message', (e) => {
if (e.data.type === 'webpackProgress' &&
e.data.data.percent === 100) {
console.log('reload');
}
});
注意:这需要在与第一个代码片段相同的上下文中执行。