Webpack production browser reload

Question

I would like the users webpage to reload each time a new build is made to the production scripts. Is there an endpoint I can call to get the current version number with webpack? I don't build the scripts on the server, rather, I build them on local and scp the final results..

Answer 1

You do not want to use the --watch webpack cli command, because it would affect your running server/api, and yes, when used with Hot Module Reloading, which can trigger a reload -- it adds an endpoint it pings through various means, which includes a polling fallback.

You do not want this in production, clients can potentially send requests to compare versions very quickly. Instead you should generate a manifest.json as part of your build process, and place it with your public assets as an endpoint your browser clients can hit.

Then you can control the refresh interval. You could tie this in with a service worker as well. But a basic example would use simple xhr/fetch, check if the build hash has changed in the manifest.json at a reasonable setInterval, and if it has call location.reload(). A tip when testing: location.reload(true) avoids browser cache.

To generate:

var ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    // ...
    plugins: [
      new ManifestPlugin()
    ]
};

Answer 2

It has nothing to do with webpack. Webpack is a module bundler. it does have an Webpack dev server for development purpose with live reloading (using websocket). When you build your application, you will only have static files. It is up to you to choose your server serving theses files, so there is neither websocket server, nor websocket client in your bundle.

Which you want to do in production is possible, but it seems complex for me with no much benefit.