I'm using webpack-dev-server in a webpack 5/Vuejs 3 application to make use of the feature of code changes showing in the browser as soon as they were saved in the editor during the application development (long explanation of the feature that I am interested in, but I think it trades under "hot" or "HMR").

The good thing is that this works in principal. I can update a .vue file in my editor, save it, see the webpack-dev-server recompiling, see the JS console log indicating that it's detected a change and the change (for instance a textual change) showing up in the browser page.

However, when one navigates to another route (URL) after the initial (hard) page load, so that the initial page URL differs from the current URL, the code change is not reflected in the browser page. All other steps such as compile, change detection on the client, reload changes, logs are performed, but it's just not updating the browser page. It does however update then page when one navigates somewhere else and back.

Does this issue sound familiar to anyone? I suppose that this the live update is meant to be working even when navigating to another route (URL) within the single page app (please correct if my expectations are wrong).

The relevant part of my webpack.conf.js (nothing special IMHO):

  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
  }

Update

Interestingly, updates to the <style> section are reflected immediately, even if the initial page load URL has changed.

CodePudding user response：

Just write historyApiFallback: true. It should work.

   devServer: {
      historyApiFallback: true,
      port: PORT || config.dev.port,
      hot: true,
      open: config.dev.autoOpenBrowser,
      proxy: config.dev.proxyTable
    },