Estoy creando una aplicación web y tengo un elemento de entrada con enfoque automático. Cada vez que cambio algo en mi paquete web app.js, actualizo automáticamente la página y aplico mis cambios, pero eso no trae el enfoque automático a mi elemento de entrada.

Cuando vuelvo a cargar la página manualmente, veo que mi elemento de entrada se enfoca como el comportamiento que esperaba, pero cuando sigo editando y guardando mi app.js, veo que el elemento pierde su enfoque

¿Puedo hacer que funcione de manera que se comporte como una actualización manual?

este es mi elemento en la página que tiene enfoque automático

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

este es el contenido de configuración de mi paquete web

 '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') })] }