相关疑难解决方法(0)

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

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

在我最初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 …