Why the browser has a beforeunload event even though I do not use it in my codes?

I have a function to help the user scroll up to the top of the page like this:

function toTheTop(){
        document.getElementByID('topUpBtn').addEventListener('click', ()=>{
            scrollTo( { top: document.querySelector('h1').getBoundingClientRect().top,
        behavior: 'smooth'})
    });
}

export {
    toTheTop
}

I am using webpack for code organisation. I called toTheTop function in an entry point as below:

import { toTheTop } from './js/TopUpButton.js';

if(document.readyState !== 'loading') {
    console.log('document is already ready');
    toTheTop();
} 
else{
    document.addEventListener('DOMContentLoaded', ()=>{
        console.log('document was not ready'),
        toTheTop();
    });
}

export {
    toTheTop
}

I have tested this function without webpack and it worked. However, when using with webpack, it didn’t. Inspect the console for the button I only see:

DOMContentloaded
click

But with webpack setup, I see a weird line named “beforeunload” in order like this:

beforunload
click

open this line I saw:

self.addEventListener("beforeunload", function () {
  status.isUnloading = true;
});

I did not implement this code at all. I look for the use of beforeunload, this only uses if we want to prompt something for user before leaving a page.

My questions are: Why do I have the beforeunload function in my code? Does this relate to my webpack setup? And How can I solve my problem?

I tried to figure it out for several days, but still can’t handle it. Really need your help!