Deploying new Webpack bundle causes error until page refresh

Question

We use webpack 1.x with React to bundle our application. Furthermore, in order to bust caches when javascript files have changed we have our output set in webpack.config.js as:

output: {
    path: __dirname + '/dist',
    filename: 'index_bundle.[chunkhash:10].js',
    publicPath: '/'
},

This successfully accomplishes our goal of changing file names when new versions of the app are deployed. And on a successful deploy, one can see that the new files are there.

The wrinkle comes in when a user is on the app during a deploy. Suddenly, chunks that were once there are not, and while the index.html successfully updates, some chunks that are currently in use by the browser make bad requests for old, non-existent files.

Is there a conventional way for webpack to handle the switch? Or within our React app to have it gracefully handle a bad component import. We host on S3, which (like Meteor, I'm under the impression) falls back to index.html on a non-existent file request. In our app, this results in a Syntax error: Unexpected token < error because it is expecting javascript, not HTML.

Edit: For averting the bad import in my React app, perhaps I could apply logic in the route's index.js file? Currently my getComponent calls look simply like this:

getComponent(nextState, callback) {
  require.ensure([], (require) => {
    callback(null, require('./components/HomePage').default);
  });
}

EDIT 2: Found an answer to my issue here.

Answer 1

What if you didn't delete the old files on S3?

If you upload with a different chunkhash, presumably you could keep the old hash'ed files around for a while?