Как настроить splitChunks для пакетов node_modules, если мне нужен пакет 1 js для 1 пакета, и то же самое с css? - PullRequest
Новая
       21

Как настроить splitChunks для пакетов node_modules, если мне нужен пакет 1 js для 1 пакета, и то же самое с css?

0 голосов
/ 26 апреля 2019

Я пытаюсь настроить оптимизацию в моем webpack-config.Задача состоит в том, чтобы использовать splitChunks для пакетов node_modules (swiper, fancybox), чтобы предотвратить дублирование кода 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 файла, 1js для обоих пакетов и 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]'
                }
            }]
        }
    ]
}
...