Webpack：undefined 不是清除浏览器缓存时解析的对象（评估 't[e].call'）-解网

问：

我设置了一个 Webpack 配置：

module.exports = {
  mode: isProduction ? 'production' : 'development',
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: './index.jsx'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: ({ chunk: { name } }) => {
      return name === 'main' ? 'bundle.min.js' : '[name].js'
    }
  },
  optimization: {
    runtimeChunk: {
      name: 'vendors'
    },
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          reuseExistingChunk: true
        }
      }
    }
  },
  ...

因此，运行会在文件夹中创建几个文件：npm run builddist

bundle.min.js：应用代码
bundle.min.css： CSS
vendors.js：节点模块

然后，在 HTML 模板中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="referrer" content="no-referrer"/>
    <script defer="defer" src=vendors.js></script>
    <link rel="stylesheet" type="text/css" href="bundle.min.css?ts={{timestamp}}">
</head>
<body>
<div id="app"></div>
<script src="bundle.min.js?ts={{timestamp}}"></script>
</body>
</html>

这很有效。但是有一天，在部署新版本后，UI 上没有任何显示，我在浏览器控制台中收到了以下错误消息：

TypeError: undefined is not an object (evaluating 't[e].call')
  r: unsupportedIterableToArray.js:8
  4197: bundle.min.js:272941
  r: unsupportedIterableToArray.js:8
  (anonymous function) - index.less:2
  t: node module decorator:4
  t
  forEach
  (anonymous function) - jsonp chunk loading:34
  (anonymous function) - jsonp chunk loading:39
  Global code - jsonp chunk loading:39

刷新页面无济于事。但是，如果我清除浏览器缓存，页面就会正确加载。

这里可能发生了什么？为什么清除浏览器缓存可以解决问题？

我无法重现该问题，但我只想了解为什么将来再次发生这种情况。

注意：我没有升级任何依赖项，所以不应该改变。但是我更新了应用程序代码......vendors.js

javascript webpack jsonp

Webpack：undefined 不是清除浏览器缓存时解析的对象（评估 't[e].call'）

Webpack: undefined is not an object (evaluating 't[e].call') resolved on clearing browser cache

评论