I have a problem. When you click on the button, the text should be output to the console. But it is output several times

const headerNavigation = document.querySelector('.open-header');
headerNavigation.addEventListener('click', () => {
    console.log('ok')
})

I use gulp with webpack-stream, this problem only occurs when gulp is enabled. If I open index.html from the file manager, then everything works fine for me.

Here is the task

function scripts () {
    return src('app/js/app.js')
    .pipe(webpack({
        mode   : 'production',
        performance: { hints: false },
        output : {
            filename : 'app.min.js'
        },
        module : {
            rules : [
                {
                    test    : /\.js$/,
                    exclude : /(node_modules)/,
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/preset-env'],
                            plugins: ['babel-plugin-root-import']
                        }
                    }
                    // query: {
                    //  presets: ['@babel/env'],
                    //  plugins: ['babel-plugin-root-import']
                    // }
                }
            ]
        },
        optimization: {
            minimize: true,
            splitChunks : {
                chunks : 'all'
            }
        },
    }))
    .pipe(dest('app/js'))
    .pipe(browserSync.stream())
}

Using the poke method, I realized that the problem is in browser-sync. I was advised to change browser Sync.stream() to browser Sync.reload(), but I just get an error

I will be very grateful if you can help me