在Webpack中的不同配置导出上应用CommonsChunkPlugin？

Question

我正在开发一个由以下"实体"组成的项目:

• 静态网站的几页
• 一个应用程序
• 管理仪表板

在我最初webpack.config的设置中,我将每个实体作为不同entry点处理.例如,我会有类似的东西

entry: {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css'
    ],
    admin: [
        'admin.js',
        'admin.css'
    ],
    websitePageA: [
        'analytics.js',
        'websitePageA.js',
        'websitePageA.css'
    ],
    websitePageB: [
        'analytics.js',
        'websitePageB.js',
        'websitePageB.css'
    ],
    websitePageC: [
        'analytics.js',
        'websitePageC.js',
        'websitePageC.css'
    ],
    app: [
        'analytics.js',
        'app.js',
        'app.css'
    ]
}

当我申请时,CommonsChunkPlugin我会以这样的方式尝试将我自己的公共文件(例如analytics.js上面的文件)分离到他们自己的common包和供应商公共文件(例如jquery)到他们自己的vendor包中.

然而,这在语义上起作用,我对结果不满意,因为当我制作一个vendor据说应该包含每个供应商文件的包时,我并没有这样做.并非每个页面都需要各个页面所需的每个供应商文件,因此我的优化方式是我的vendor包只包含这些入口点之间的公共供应商文件.

经过考虑,我认为最好的做法是将我的配置分为3个,一个用于app实体,一个用于管理仪表板实体,一个用于整个网站.

所以我现在有4个config文件,一个用于上述3个实体中的每一个,另一个用于webpack.config.js导入其他3个实体并导出包含它们的数组.

我webpack.config.js看起来像这样

'use strict';

const appConfig = require('./webpack.config.app');
const siteConfig = require('./webpack.config.site');
const adminConfig = require('./webpack.config.admin');

module.exports = [
    appConfig,
    siteConfig,
    adminConfig,
];

并且entry每个子配置的配置如下所示:

对于应用程序

entry = {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css',
         etc...
    ],
    main: [
        'analytics.js',
        'app.js',
        'app.css'
    ]
};

对于网站

entry: {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css',
         etc...
    ],
    websitePageA: [
        'analytics.js',
        'websitePageA.js',
        'websitePageA.css'
    ],
    websitePageB: [
        'analytics.js',
        'websitePageB.js',
        'websitePageB.css'
    ],
    websitePageC: [
        'analytics.js',
        'websitePageC.js',
        'websitePageC.css'
    ]
}

对于管理仪表板

entry: {
    vendor: [
        'jquery',
        'bootstrap',
        'bootstrap/dist/css/bootstrap.css',
         etc...
    ],
    admin: [
        'admin.js',
        'admin.css'
    ]
}

在上面的每个配置中,我运行CommonsChunkPlugin的方式是将所有供应商文件分成一个vendor包,在网站的情况下,将所有公共文件分成自己的common包.

我还manifest为每个文件创建一个单独的文件,其中只包含webpack运行时.

这些配置中的每一个都在我的build/目录中的特定目录中输出.例如,我的应用程序配置输出到build/app/,网站build/site等.输出路径也用作publicURL每个配置的设置,以便webpack知道在何处从代码分割方案中提取代码

这个问题

您可能已经注意到,jquery依赖性在所有不同的配置中很常见.

我的问题是,在我的主要webpack.config.js是可以申请CommonsChunkPlugin每个单独的子配置的供应商文件/捆绑？

这样我就可以拥有一个"超全局" vendor捆绑包,其中包含所有实体中的公共供应商文件？(应用,管理信息中心和网站)

UPDATE

我附上我的每个配置生成的包的可视化,以帮助您了解我拥有的内容:

该网站的捆绑包

应用程序的捆绑包

管理面板的捆绑包

所以,我想要做的,就是多了一个软件包,其中移动所有的实例,其中jquery并bootstrap使用到一个新的包,只包含它们.这束会之间应用,网站和管理面板,其现在将不包含被共享jquery并bootstrap在它们各自的供应商束.