从webpack4 -> webpack5迁移时，绑定的文件在被请求时会有错误的url吗？

Question

我目前正在进行从webpack4到webpack5的迁移。我对绑定的JS的URL有问题(在我的例子中是client.js)。

​

​

这个请求应该是两个不同的请求。下面是一张关于webpack4的图片：

​

这是客户端的条目：

// ...

name: 'client',
target: 'web',
devtool: 'source-map',
entry: {
  client: ['@babel/polyfill', './src/client.js'],
},

// ...

这是输出：

// ...

output: {
  path: resolvePath(BUILD_DIR, 'public/assets'),
  publicPath: '/assets/',
  pathinfo: isVerbose,
  filename: isDebug ? '[name].js' : '[name].[chunkhash:8].js',
  chunkFilename: isDebug ? '[name].chunk.js' : '[name].[chunkhash:8].chunk.js',
},

// ...

我还将organization.splitChunks.cacheGroups设置为：

optimization: {
  splitChunks: {
    cacheGroups: {
      commons: {
        chunks: 'initial',
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
      },
    },
  },
},

因为我不是最初做这个配置文件的人，所以很难调试，所以我在这里很疯狂。而且文件相当大，我刚刚粘贴了我认为很重要的部分。如果您认为问题可能是由于另一个配置属性，请随意分享。

有人知道为什么会发生这种事吗？

提前感谢！

Answer 1

@AKX (Migration from webpack4 -> webpack5, bundled file will have a faulty url when it gets requested?)

你的确把我引向了这里的问题。在修复这一错误之后，我意外地在chunk-manifest.json中创建了一个嵌套数组。其内容应是：

{
  "client": [
    "/assets/vendors.chunk.js",
    "/assets/client.js"
  ]
}

相反，在将Set转换为数组(以便能够在其上运行filter )时，我搞砸了，因此内容是：

{
  "client": [
    [
      "/assets/vendors.chunk.js",
      "/assets/client.js"
    ]
  ]
}

嵌套数组导致这种连接，因此URL使用逗号作为两个不同的源。