Browser loads old bundle.js from Webpack

Question

I'm a React newbie attempting to learn how to integrate a Flask app with React. I'm finding that whenever I make changes to my React .js files, the changes are being recompiled in my bundle.js but not appear in my browser.

To replicate, clone the source code from this Github repo. Follow the instructions to set up, and make sure to run webpack --watch and python app.py from a virtual environment. It should start up a simple web server accessible at localhost:5000.

You should get this screen when visiting on Chrome:

Next, go into your Hello.js file and make some random edits- for example, change Hello World! to Hello everyone!. From what I've learned, webpack --watch should take care of listening to changes and recompiling, which it does: if you go into bundle.js you'll see that the changes have been recompiled:

var Hello = _react2.default.createClass({
  displayName: 'Hello',
  render: function render() {
    return _react2.default.createElement(
      'h1',
      null,
      'Hello, everyone!'
    );
  }
});

However, when you refresh your browser, you'll get the same exact message (Hello World) as before. When I inspect the source bundle.js that Chrome is using, I find that it is STILL using my old code:.

My theory is that Chrome is using some sort of caching? But I have been playing around with this for about an hour and am unable to get my bundle.js to update.

What is causing my browser to load my bundle.js file?

Edit: I reloaded, and now the change has been applied to my browser screen. However, it seems like an exceptionally long time to refresh and update- at least 4-5 minutes. Any way to shorten this time frame?

Answer 1

Yes, chrome caches this file. It always has the same name.
You could prevent caching by opening dev tools and setting Disable cache flag in the Network tab.

But note that you need some sort of cache preventing approach for production, because your users will not have this flag set.
I suggest using md5 hash in bundle name.

Answer 2

Besides disabling cache in the inspector, you can hold down the Refresh icon and select the third option "Empty Cache and Hard Reload" to flush out cache.

Also, it sometimes helps to hit the URL to the script in the browser: https://yourhost.com/bundle.js