浏览器从Webpack加载旧的bundle.js

Question

我是一名React新手，试图学习如何将Flask应用程序与React集成。我发现，每当我对React .js文件进行更改时，所做的更改都会重新编译bundle.js到我的浏览器中，而不会出现在浏览器中。

要复制，请从此Github存储库克隆源代码。按照说明进行设置，并确保运行webpack --watch并python app.py从虚拟环境。它应该启动一个简单的Web服务器，该服务器可以从访问localhost:5000。

在Chrome浏览器上访问时，应该显示以下屏幕：

接下来，进入Hello.js文件并进行一些随机编辑-例如，更改Hello World!为Hello everyone!。从我学到的知识来看，webpack --watch应该注意监听更改并重新编译，这确实可以做到：如果您进入，bundle.js您将看到更改已重新编译：

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

但是，刷新浏览器时，将获得与以前相同的消息（Hello World）。当我检查bundle.jsChrome使用的源代码时，发现使用我的旧代码仍为STILL：。

我的理论是Chrome使用某种缓存？但是我已经玩了大约一个小时，无法bundle.js更新。

是什么导致浏览器加载bundle.js文件？

编辑：我已重新加载，现在更改已应用于我的浏览器屏幕。但是，刷新和更新似乎耗时特别长，至少需要4-5分钟。有什么办法可以缩短这个时间范围？

Answer 1

是的，chrome会缓存此文件。它始终具有相同的名称。
您可以通过打开开发工具并Disable cache在“网络”选项卡中设置标志来防止缓存。

但是请注意，您需要某种防止缓存的方法来进行生产，因为您的用户将不会设置此标志。
我建议在捆绑包名称中使用md5哈希。