Создание подмножества файлов поставщиков с помощью Webpack

Question

В настоящее время я работаю на веб-сайте с несколькими страницами и хотел бы создавать JS-файлы с помощью Webpack.Сценарий ниже является упрощенным примером, чтобы прояснить, чего я хочу достичь.

Примечание: в этом примере файл vendor - это библиотека, которая присутствует в каталоге node_modules.

Структура

Страница A

• jquery.js (поставщик общих для всех страниц)
• lodash.js (поставщик распределяется между всеми страницами)
• act.js (зависит от поставщика для страниц A и B)
• page-a.js

Страница B

• jquery.js (поставщик распределяется между всеми страницами)
• lodash.js (поставщик распределяется между всеми страницами)
• реаги.js (зависит от поставщика для страниц A и B)
• page-b.js

Страница C

• jquery.js (поставщикобщий для всех страниц)
• lodash.js (поставщик для всех страниц)
• page-c.js

желаемый вывод

Страница A

• vendors-page-ab.js
• page-a.js

Страница B

• vendors-page-ab.js
• page-b.js

Страница C

• vendors-page-c.js
• page-c.js

Я изо всех сил пытаюсь придумать конфигурацию Wepack, которая способна создать файл поставщиков и файл, содержащий подмножество поставщиков.

Я попытался использовать оптимизацию splitChunks.Но почему-то я не могу провести различие между всеми поставщиками и поставщиками с общим доступом, использующими эту конфигурацию.

const config = {
    optimization: {
                splitChunks: {
                    cacheGroups: {
                        commons: {
                            test: /[\\/]node_modules[\\/]/,
                            name: 'vendor',
                            chunks: 'all'
                        }
                    }
                },
            }
}

Как мне добиться желаемой структуры вывода с помощью Webpack?