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

Question

我的表单页面在 window 上设置了beforeunload事件/功能，以警告用户在转到其他页面或刷新之前保存更改。 它工作得很好，看起来像这样：

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

问题是在开发中运行时，每次我更改 IDE、Webpack 中的文件时，开发服务器都会尝试自动重新加载页面。 我想关闭这个beforeunload事件，这样我就不会在 Chrome 中一直被这个警报所困扰：

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

有没有办法在 Webpack 开发服务器尝试重新加载页面之前在浏览器中运行自定义 function？

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);
    }
  });
}

我添加了带有EnvironmentPlugin的process.env.DEV以确保代码不会进入生产环境。 您还可以使用process.env.NODE_ENV === 'development' ，它无需添加EnvironmentPlugin即可工作，因为Webpack 会自动添加。

或者，使用HMR 的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 ，则无需导入，如下所述：

如果通过HotModuleReplacementPlugin启用了热模块替换，则其接口将在module.hot属性下公开。 通常，用户会检查界面是否可访问，然后开始使用它。

此外，也许不是在第二种情况下检查apply 、 abort或fail ，您可以使用idle 。