vue-cli v5 and Webpack vendor split packages

vue.config.js

module.exports = {
  productionSourceMap: false,
  configureWebpack: {
    optimization: {
      runtimeChunk: 'single',
      splitChunks: {
        chunks: 'all',
        minSize: 0,
        maxInitialRequests: Infinity,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module, chunks, cacheGroupKey) {
              // get the name. E.g. node_modules/packageName/not/this/part.js
              // or node_modules/packageName
              const match = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)
              // the above might cause filename collisions if you have multiple packages from the same scope.
              // then use: /[\\/]node_modules[\\/](?:(@[\w-]*?[\\/].*?|.*?)([\\/]|$))/

              if (match) {
                const packageName = match[1]
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace('@', '')}`
              }
            }
          }
        }
      }
    }
  }
}