部署新的 Webpack 包会导致错误，直到页面刷新

Posted 2023-02-19

【中文标题】部署新的 Webpack 包会导致错误，直到页面刷新

【英文标题】：Deploying new Webpack bundle causes error until page refresh

【发布时间】：2017-10-03 02:21:44

【问题描述】：

我们使用带有 React 的 webpack 1.x 来捆绑我们的应用程序。此外，为了在 javascript 文件发生更改时破坏缓存，我们将输出设置在 webpack.config.js 中：

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

这成功地实现了我们在部署新版本的应用程序时更改文件名的目标。并且在成功部署后，可以看到新文件就在那里。

当用户在部署期间使用应用程序时，就会出现问题。突然间，曾经存在的块不再存在，而当 index.html 成功更新时，浏览器当前正在使用的一些块对旧的、不存在的文件提出了错误的请求。

webpack 是否有传统的方式来处理切换？或者在我们的 React 应用程序中让它优雅地处理错误的组件导入。我们在 S3 上托管，它（就像 Meteor，我的印象是）在不存在的文件请求上回退到 index.html。在我们的应用中，这会导致 Syntax error: Unexpected token < 错误，因为它需要的是 javascript，而不是 HTML。

编辑：为了避免我的 React 应用程序中的错误导入，也许我可以在路由的 index.js 文件中应用逻辑？目前我的 getComponent 调用看起来就像这样：

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

编辑 2： Found an answer to my issue here.

【问题讨论】：

有些不对劲。如果您收到的是 html（因为文件不存在），您应该使用 HTTP 404 来回答它，这会强制浏览器忽略该文件并跳过解析。

在 S3 上托管静态网站的默认设置是在错误时返回文件（包括无法找到所述文件）。话虽如此，我的 React 应用程序是否有办法查看 404（或错误的文件类型）并避免任何类型的错误？我的路由 index.js 文件的 getComponent 已经在上面添加了

【参考方案1】：

如果您没有删除 S3 上的旧文件会怎样？

如果您使用不同的 chunkhash 上传，大概您可以将旧的哈希文件保留一段时间？

【讨论】：

这是一个潜在的选择。理想情况下，我们希望有一种方法不必这样做，因为我们目前在部署期间会删除旧文件。