时间戳

首页 > 解决方案 > 在 webpack 开发服务器内部运行时忽略页面导航确认对话框

webpack - 在 webpack 开发服务器内部运行时忽略页面导航确认对话框

问题描述

我正在使用 webpack 开发服务器开发一个项目。该项目有某些状态会提示用户确认，如下所示：

window.onbeforeunload = () => {
  if (someCondition) {
    return true;
  }
};

这使得刷新时会出现提示，当 webpack 开发服务器检测到代码更改时也会出现提示，这是相当不方便的。

当 webpack 开发服务器请求刷新时，是否有某种方法可以禁用确认？

标签： webpackbrowserwebpack-dev-server

解决方案

webpack 热重载在窗口中暴露了 webpackHotUpdate 函数，所以你可以滥用它。

有这样的东西。确保它在 webpack 创建函数后执行。

var _webpackHotUpdate = window.webpackHotUpdate;
var _hotUpdateFired = false;

window.webpackHotUpdate = function() {
    _hotUpdateFired = true;
    return _webpackHotUpdate.apply(window, arguments)
};

这添加了一个全局窗口变量，该变量在调用时切换为 true。然后在您的处理程序中，您只有

window.onbeforeunload = () => {
  if (someCondition && !(typeof _hotUpdateFired !== 'undefined' && _hotUpdateFired)) {
    return true;
  }
};

全局窗口变量是一个肮脏的把戏，但我想说这对开发来说很好。我已经将它包装在 typeof 检查中，这样您就可以将第一个代码块包装在“if dev”条件下，而当您没有此变量时，第二个代码块不会在 prod 中出错。

推荐阅读