Я работаю над проектом, который состоит из следующих «сущностей»:

• Несколько страниц для статического сайта
• Приложение
• Панель администратора

В моей первоначальной 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 файла, по одному для каждой из трех вышеупомянутых сущностей и один основной 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 файл для каждого из них, который включает только среду выполнения веб-пакета.

Каждая из этих конфигураций выводится в определенном каталоге в моем каталоге build/. Например, моя конфигурация приложения выводит на build/app/, веб-сайт - на build/site и т. Д. Пути вывода также используются в качестве publicURL параметра для каждой конфигурации, чтобы веб-пакет знал, откуда брать код в сценариях разделения кода