如何配置 webpack-dev-server 在重新加载之前关闭浏览器上的 "beforeunload" 事件？

Question

我的表单页面在 window 上设置了 beforeunload event/function，以警告用户在转到其他页面或刷新之前保存更改。效果很好，看起来像这样：

$(window).on("beforeunload", myCustomWindowBeforeUnloadFunction);

问题是运行在开发中，每次我更改 IDE 中的文件时，Webpack Dev Server 都会尝试自动重新加载页面。我想关闭这个 beforeunload 事件，这样我就不会在 Chrome:

中被这个警报唠叨个不停

Are you sure you want to leave the page? Data you have entered may not be saved.

在 Webpack Dev Server 尝试重新加载页面之前，我可以在浏览器中运行自定义函数吗？

Answer 1

也许是这样的：

if (process.env.DEV) {
  window.addEventListener('message', ({ data: { type } }) => {
    if (type === 'webpackInvalid') {
      $(window).off('beforeunload');
    } else if (type === 'INIT_INSTANCE') {
      $(window).on('beforeunload', myCustomWindowBeforeUnloadFunction);
    }
  });
}

我添加了 process.env.DEV 和 EnvironmentPlugin to make sure that code doesn't make it to production. You could also use process.env.NODE_ENV === 'development', which works without adding EnvironmentPlugin, as Webpack adds that automatically。

或者，使用 HMR's addStatusHandler function:

if (process.env.DEV && module.hot) {
  module.hot.accept();

  module.hot.addStatusHandler((status) => {
    if (status === 'prepare') {
      $(window).off('beforeunload');
    } else if (/apply|abort|fail/.test(status)) {
      $(window).on('beforeunload', myCustomWindowBeforeUnloadFunction);
    }
  });
}

注意 module.hot 如果您使用的是 HotModuleReplacementPlugin, no need to import that, as explained here:

If Hot Module Replacement has been enabled via the HotModuleReplacementPlugin, its interface will be exposed under the module.hot property. Typically, users will check to see if the interface is accessible, then begin working with it.

此外，您可以使用 idle.

而不是在第二种情况下检查 apply、abort 或 fail

如何配置 webpack-dev-server 在重新加载之前关闭浏览器上的 "beforeunload" 事件？

How do I configure webpack-dev-server to turn off "beforeunload" events on the browser before reload?

html

javascript

onbeforeunload

webpack

webpack-dev-server