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

Question

I'm currently working on a migration from webpack4 to webpack5. I have problems with the URL to the bundled JS (in my case client.js).

This request should be two different ones. Here is an image from how it was with webpack4:

This is the entry for the client:

// ...

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

// ...

This is the output:

// ...

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',
},

// ...

I have also set organization.splitChunks.cacheGroups as follows:

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

Since I was not the person who initially did this config file it's kind of hard to debug, I'm shooting wild here. And the file is fairly large, I've just pasted the bits I believe are important. If you think the issue could be because of another configuration property, feel free to share.

Anyone know why this is happening and why this happens?

Thanks in advance!

Answer 1

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

You certainly guided me to the problem here. After fixing this error I accidentally created a nested array in chunk-manifest.json . The content should be:

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

Instead I screwed up while converting the Set to an array (to be able to run filter on it) so the content was instead:

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

The nested array resulted in this concatenation so the URL went with a comma instead as two different sources.