使用Webpack创建供应商文件的子集

Question

我目前正在一个有多个页面的网站上工作，想使用Webpack生成JS文件。 下面的方案是一个简化的示例，目的是使我想要实现的目标更加清晰。

注意：在此示例中，供应商文件是node_modules目录中存在的库。

结构

页面A

• jquery.js（供应商在所有页面之间共享）
• lodash.js（供应商在所有页面之间共享）
• react.js（特定于A页和B页的供应商）
• page-a.js

页面B

• jquery.js（供应商在所有页面之间共享）
• lodash.js（供应商在所有页面之间共享）
• react.js（特定于A页和B页的供应商）
• page-b.js

Page C

• jquery.js（供应商在所有页面之间共享）
• lodash.js（供应商在所有页面之间共享）
• page-c.js

所需的输出

页面A

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

页面B

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

Page C

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

我正在努力提出一个Wepack配置，该配置能够创建供应商文件和包含一部分供应商的文件。

我尝试过的是使用splitChunks优化。但是以某种方式，我无法在使用此配置的所有供应商和共享供应商之间进行区分。

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

如何使用Webpack实现所需的输出结构？