Как в Webpack 4 сделать отдельный vendor для некоторых entry?

Question

[Bobsans]

У меня есть 3 ентрипоинта в конфиге вебпака. Один - само приложение, два других - для отдельных страниц с публичным доступом.

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

Есть вот такой splitChunks:

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

Но чанк vendor один и тот же для каждого entry. Можно ли сделать, например, чтобы для bundle делался один vendor, а для login и offer другой, только с теми библиотеками, которые там используются?
Спасибо.

Answer 1

[yakov_255]

После долгих поисков по интернету, написал свое решение:

Проверено на версии Webpack 4.29

добавить в начало файла webpack

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"])
                }
            }
        }
    },

скриншот BundleAnalyzerPlugin

Как видно на картинке, vendor для сайта содержит jquery
А для админки jquery + vue

Comments

[Bobsans]

идея норм, но у меня почему-то у всех модулей module.name === undefined.
webpack 4.39.2