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

Question

我的表单页面有一个 beforeunload 在窗口上设置了一个事件函数，以警告用户在进入不同页面或刷新之前保存他们的更改。它工作得很好，看起来像这样。

$(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开发服务器试图重新加载页面之前，在浏览器中运行一个自定义函数？

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 以确保代码不会被用于生产。你也可以使用 process.env.NODE_ENV === 'development'，它的工作原理是不需要添加 EnvironmentPlugin作为 Webpack会自动添加.

或者，使用 HMR的 addStatusHandler 功能:

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不需要导入，如上所述 此处:

如果： 热模块更换 已被启用，通过 HotModuleReplacementPlugin，它的接口将暴露在 module.hot 财产. 通常情况下，用户会先检查界面是否可以访问，然后开始使用它。

另外，也许不需要检查 apply, abort 或 fail 在第二种情况下，你可以用 idle.