I'm building a web app and I have an input element with autofocus Whenever I change something in my app.js webpack automatically refresh the page and apply my changes but that doesn't bring autofocus to my input element

When I reload the page manually I see my input element get into focus like the behavior I expected but when I keep editing and saving my app.js, I see the element lose it's focus

Can I make it work in a way that behave like a manual refresh ?

this is my element in the page which has autofocus

<input class="" type="text" value="" autofocus>

this is my webpack config content

'use strict';

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development', // 'production'
    entry: {
        main: path.resolve(__dirname, 'src/app.js')
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js',
        // assetModuleFilename: '[name][ext]',
        clean: true
    },
    devtool: 'inline-source-map',
    devServer: {
        static: path.resolve(__dirname, 'src'),
        port: 8080, // default 8080
        open: true,
        hot: true
    },
    // loaders
    module: {
        rules: [
            // css
            {
                test: /\.css$/, use: ['style-loader', 'css-loader']},
            // images
            {
                test: /\.(svg|ico|png|webp|jpg|gif|jpeg)$/, type: 'asset/resource'}
            // js for babel
            // ,{
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     use: {
            //         loader: 'babel-loader',
            //         options: {
            //             presets: ['@babel/preset-env']
            //         }
            //     }
            // }
        ]
    },
    // plugins
    plugins: [new HtmlWebpackPlugin({
        title: 'DDS Audit',
        filename: 'index.html',
        template: path.resolve(__dirname, 'src/views/temp.html')
    })]
}