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

Question

My form pages have a beforeunload event/function set on the window to warn the user to save their changes before moving on to a different page or refreshing. It works great, and looks something like this:

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

The problem is when running in development, every time I change a file in my IDE, Webpack Dev Server attempts to auto-reload the page. I want to turn off this beforeunload event so I don't keep getting nagged with this alert in Chrome:

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

Is there a way I can run a custom function in the browser before Webpack Dev Server attempts to reload the page?

Answer 1

Maybe something like this:

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

I've added process.env.DEV with 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 .

Or, using 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);
    }
  });
}

Note module.hot will be there if you are using 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.

Also, maybe instead of checking for apply , abort or fail in the second condition, you could useidle .