How to make a separate vendor for some entries in Webpack 4?

Question

webpack

I have 3 entrypoints in my webpack config. One is the application itself, the other two are for individual pages with public access.

entry: {
    bundle: './index.js',
    login: './login.js',
    offer: './offer.js'
}

There is such a splitChunks:

optimization: {
    runtimeChunk: 'single',
    splitChunks: {
        cacheGroups: {
            vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: 'vendor',
                chunks: 'initial'
            }
        }
    }
}

But the vendor chunk is the same for every entry. Is it possible to make, for example, one vendor for a bundle, and another for login and offer, only with the libraries that are used there?
Thank you.

Answer 1

After a lot of searching on the internet, I wrote my solution:
Tested on Webpack version 4.29

const SplitChunksPlugin = require("webpack/lib/optimize/SplitChunksPlugin");
const filterByEntryPoint = (entry, test = /[\\/]node_modules[\\/]/) => {
    const recursiveIssuer = m => m.issuer ? recursiveIssuer(m.issuer) : m.name;

    return function (module, c) {

        const name = recursiveIssuer(module);
        if ((typeof entry === "string" && name === entry) ||
            (Array.isArray(entry) && entry.indexOf(name) !== -1)) {
            return SplitChunksPlugin.checkTest(test, module);
        }
        return false;
    }
};

optimization: {
        splitChunks: {
            cacheGroups: {
                vendor: {
                    name: "vendor",
                    chunks: "all",
                    test: filterByEntryPoint("bundle")
                },
                admin_vendor: {
                    name: "vendor-login-offer",
                    chunks: "all",
                    test: filterByEntryPoint(["login","offer"])
                }
            }
        }
    },

As you can see in the picture, the vendor for the site contains jquery
And for the admin panel jquery + vue