Webpack splitchunks creates dynamic chunk file

Question

expecting to have only two chunks vendors and commons. However webpack creates a new chunk file for specific entries with delimiter.

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            vendor: {
                name: 'vendors',
                chunks: 'all',
                test: /[\\/]node_modules[\\/]/,
                reuseExistingChunk: true,
            },
            common: {
                chunks: 'all',
                minChunks: 9,
                name: 'commons',
                reuseExistingChunk: true,
            }
        }
    }
}

How to force webpack to use one of those in cacheGroups and not to create a new one?

Answer 1

After upgrading from Webpack v4 to v5 I had a similar problem. There were a couple of chunks with "~" in their filename.

This splitChunks configuration got me back to only one bundle file per entrypoint, and one shared vendor bundle.

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