Z
Z
zikdead2018-09-29 10:20:46
webpack
zikdead, 2018-09-29 10:20:46

How to split a chunk with vendors using SplitChunksPlugin?

webpack4. There is a setting:

optimization: {
        splitChunks: {
            chunks: 'all',
            minSize: 30000,
            minChunks: 1,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            automaticNameDelimiter: '~',
            name: false,
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    name: 'vendors',
                    maxSize: 240000,
                },
                default: {
                    minChunks: 2,
                    priority: -20,
                    reuseExistingChunk: true,
                },
            },
        },
    },

Everything works if you do not specify maxSize. if you specify max size, then a hash like vendors ~ 32131274 is added to the chunk name, because of this I cannot specify a chunk in the html webpack plugin (and not only):
new HtmlWebpackPlugin({
            chunks: ['app', 'vendors'],
            hash: true,
            template: path.join(paths.PUBLIC, 'index.html'),
            filename: 'index.html',
        }),

What to do? Already covered everything. And it also breaks the bundle very strangely. The bundle with vendors weighs 1m, but when you specify max 240kb, it breaks not into 5-6 pieces, but into 15

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question