Better NPM Package Code Splitting

[codewithkyle]

Update the webpack.config.js file:

splitChunks: {
    chunks: 'async',
    name: 'globals',
    maxInitialRequests: Infinity,
    minSize: 0,
    cacheGroups: {
    node_vendor: {
        test: /[\\/]node_modules[\\/]/,
        chunks: 'all',
        priority: 1,
        name(module) {
        let packageName = '';
        let rawPackageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|.*$)/)[0];
        let trimmedPackageName = rawPackageName.replace(/\/node_modules\//, '');

        if(trimmedPackageName.match(/^\@/)){
            let namespaceRemoved = trimmedPackageName.replace(/(.*?\/)(?=\w)/, '');
            packageName = namespaceRemoved.replace(/\/.*/, '');
        }else{
            packageName = trimmedPackageName.replace(/\/.*/, '');
        }
        return `npm.${ packageName.toLowerCase() }`;
        },
    },
    },
},