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

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

要复制,请从这个 Github repo克隆源代码。按照说明进行设置,并确保从虚拟环境运行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)。当我检查 Chrome 正在使用的源bundle.js时,我发现它仍在使用我的旧代码:。

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

是什么导致我的浏览器加载我的bundle.js文件?

**编辑:**我重新加载,现在更改已应用于我的浏览器屏幕。但是,刷新和更新似乎需要很长时间——至少 4-5 分钟。有什么办法可以缩短这个时间?

解答

是的,chrome 缓存了这个文件。它始终具有相同的名称。

您可以通过打开开发工具并在 Network 选项卡中设置Disable cache标志来防止缓存。

但请注意,您需要某种用于生产的缓存防止方法,因为您的用户不会设置此标志。

我建议在包名称中使用 md5 哈希。