Игнорировать диалоговое окно подтверждения навигации по страницам при запуске внутри сервера webpack dev

Question

Я работаю над проектом, использующим сервер webpack. Этот проект имеет определенные состояния, которые запрашивают у пользователя подтверждение, например:

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

Это позволяет отображать подсказку при обновлении, также при обнаружении изменений кода сервером webpack dev , что довольно неудобно.

Есть ли какой-нибудь способ отключить подтверждение, когда сервер веб-пакетов запрашивает обновление?

Answer 1

Горячая перезагрузка веб-пакета открывает функцию 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, если у вас нет этой переменной.