Estoy usando webpack-dev-server en una aplicación webpack 5/Vuejs 3 para hacer uso de la función de cambios de código que se muestran en el navegador tan pronto como se guardaron en el editor durante el desarrollo de la aplicación (explicación larga de la función que Me interesa, pero creo que cotiza bajo "caliente" o "HMR").

Lo bueno es que esto funciona en principio. Puedo actualizar un archivo .vue en mi editor, guardarlo, ver la recompilación del webpack-dev-server, ver el registro de la consola JS que indica que se detectó un cambio y el cambio (por ejemplo, un cambio textual) que aparece en la página del navegador .

Sin embargo, cuando uno navega a otra ruta (URL) después de la carga de la página inicial (dura), de modo que la URL de la página inicial difiere de la URL actual, el cambio de código no se refleja en la página del navegador. Todos los demás pasos, como la compilación, la detección de cambios en el cliente, la recarga de cambios, los registros se realizan, pero simplemente no se actualiza la página del navegador. Sin embargo, actualiza la página cuando uno navega a otro lugar y regresa.

¿Este tema le suena familiar a alguien? Supongo que esta actualización en vivo está destinada a funcionar incluso cuando se navega a otra ruta (URL) dentro de la aplicación de una sola página (corrija si mis expectativas son incorrectas).

La parte relevante de mi webpack.conf.js (nada especial en mi humilde opinión):

 devServer: { historyApiFallback: { rewrites: [{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }] }, hot: true, host: HOST || config.dev.host, port: PORT || config.dev.port, open: config.dev.autoOpenBrowser, proxy: config.dev.proxyTable }

Actualizar

Curiosamente, las actualizaciones de la sección <style> se reflejan de inmediato, incluso si la URL de carga de la página inicial ha cambiado.