7

我正在开发一个由以下“实体”组成的项目：

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

在我最初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 个，一个用于应用程序实体，一个用于管理仪表板实体，一个用于整个网站。

所以我现在有 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的方式运行，在站点的情况下，所有自己的公共文件到它们自己的包中。vendorcommon

我还manifest为它们中的每一个创建了一个单独的文件，其中仅包括 webpack 运行时。

这些配置中的每一个都在我的build/目录中的特定目录中输出。例如，我的应用程序配置输出到build/app/，网站到build/site等。输出路径也用作publicURL每个配置的设置，以便 webpack 在代码拆分场景中知道从哪里提取代码

问题

您可能已经注意到，jquery依赖关系在所有不同的配置中都很常见。

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

这样我就可以拥有一个vendor包含所有实体之间通用供应商文件的“超级全局”捆绑包？（应用程序、管理仪表板和网站）

更新

我附上了我的每个配置生成的捆绑包的可视化，以帮助您了解我所拥有的：

网站的捆绑包 网站包

应用程序的捆绑包 应用程序包

管理面板的捆绑包 网站包

所以，我想要做的是再有一个包，它将所有使用的实例移动到一个新的包中jquery，bootstrap只包含它们。该捆绑包将在应用程序、站点和管理面板之间共享，现在它们将不包含jquery它们bootstrap各自的供应商捆绑包。

4

0 回答 0