webpack-optimization.js

module.exports = {
    optimization: {
        runtimeChunk: false,
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                default: false,
                vendor: {
                    enforce: true,
                    test: /[\\/]node_modules[\\/]/,
                    name (module) {
                        const packageName = module.context.match(/\/node_modules\/(.*?)$/)[1].split('/');
                        const vendor = packageName.shift();

                        if (vendor === 'core-js') {
                            return `npm/${vendor}/${packageName.join('/')}`.toLowerCase();
                        }

                        if (vendor.startsWith('@')) {
                            let mod = 'module';

                            if (packageName.length > 1) {
                                mod = packageName.pop();
                            }

                            return `npm/${vendor.replace('@', '')}/${packageName[0]}/${mod}`.toLowerCase();
                        }

                        let mod = 'module';

                        if (packageName.length > 0) {
                            mod = packageName.pop();
                        }

                        return `npm/${vendor}/${mod}`.toLowerCase();
                    },
                },
                styles: {
                    enforce: true,
                    test: /\.(css|scss|sass)$/,
                    name (module) {
                        const normalizePackageName = () => {
                            if (module.context.match(/\/node_modules/)) {
                                return module.context.replace(/.*\/node_modules(\/?)(.*?)$/, 'npm$1$2');
                            }

                            if (module.context.match(/\/assets\/stylesheets/)) {
                                return module.context.replace(/.*\/assets\/stylesheets(\/?)(.*?)$/, 'css$1$2');
                            }

                            if (module.context.match(/\/assets\/javascript/)) {
                                return module.context.replace(/.*\/assets\/javascript(\/?)(.*?)$/, 'js$1$2');
                            }

                            if (module.context.match(/\/assets/)) {
                                return module.context.replace(/.*\/assets(\/?)(.*?)$/, 'js$1$2');
                            }

                            throw new Error(module.context);
                        };

                        const packageName = normalizePackageName();
                        const res = module.identifier() || module.resource || module.rawRequest || module.userRequest;

                        const filename = res ? res.split('/').reduceRight(item => item).split('.')[0] : 'styles';

                        return `${packageName}/${filename}`.replace('@', '').toLowerCase();
                    },
                },
            },
        },
    },
}