如果我需要1个软件包的js捆绑包以及css的相同内容，如何为node_modules软件包配置splitChunks？

Question

我正在尝试在我的webpack-config中配置优化。 任务是对node_modules软件包（swiper，fancybox）使用splitChunks，以防止css和js代码重复。

现在我有这个：

    optimization: {
        splitChunks: {
            cacheGroups: {
                swiper: {
                    name: 'swiper',
                    test: /[\/]node_modules[\/](swiper)[\/]/,
                    chunks: 'all'
                },
                fancybox: {
                    name: 'fancybox',
                    test: /[\/]node_modules[\/](@fancyapps\/fancybox)[\/]/,
                    chunks: 'all'
                }
            }
        }
    },

它有效，并为每个软件包构建1个js（仅）捆绑包。 但！每个包我需要2个文件（js，css）...

我试图这样更改代码：

    optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: 'vendor',
                    test: /\.(js|css)/,
                    chunks: 'all'
                }
            }
        }
    },

...构建后，我有2个文件，两个软件包都包含1个js，两个软件包都包含1个css ...

好的是，它可以构建css文件，但对于所有软件包都为1。这不是我所需要的。

可能不是问题，不是优化，而是装载程序？

module: {
    rules: [
        {
            test: /\.js$/,
            exclude: [/node_modules\/(?!(swiper|dom7)\/).*/],
            loader: 'babel-loader',
            options: {
                presets: ['@babel/preset-env']
            }
        }, {
            test: /\.css$/,
            exclude: /node_modules/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'
                }
            ]
        }, {
            test: /\.css$/,
            include: /node_modules/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'
                }
            ]
        }, {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                {
                    loader: 'css-loader'
                }, {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('autoprefixer')({
                                grid: 'autoplace',
                                browsers: [
                                    'last 3 versions',
                                    'last 3 iOS versions',
                                    'ie >= 10',
                                    'safari >= 6'
                                ]
                            }),
                            require('cssnano')
                        ]
                    }
                },
                {
                    loader: 'resolve-url-loader'
                },
                {
                    loader: 'sass-loader'
                }
            ]
        }, {
            test: /fonts\/.*\.(woff|woff2)$/,
            use: [{
                loader: "file-loader",
                options: {
                    name: '../fonts/[name].[ext]'
                }
            }]
        }
    ]
}