Как повторить поведение CommonsChunkPlugin с webpack4 и splitChunks?

Question

В моем приложении две большие части: администраторская и публичная.У них есть несколько общих модулей, но в целом их функциональность сильно отличается, и я хочу разделить код на две части.В Webpack 3 я использовал CommonChunksPlugin со следующим конфигом:

{
    entry: ['account/index', ..., 'public/index', ...],
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'account/common',
            chunks: [
                'account/default',
                'account/placeGeneral',
                'account/placeContacts',
                'account/placeServices',
                'account/placeRules',
                'account/placePhoto',
                'account/placeVideo',
                'account/sights',
                'account/placeIndex',
                'account/index',
                'account/balance',
                'account/help',
                'account/helpVideo',
                'account/plan/list',
                'account/plan/edit',
                'account/room/list',
                'account/room/edit',
                'account/occupancy',
                'react-common'
            ],
            minChunks: 2
        }),

        new webpack.optimize.CommonsChunkPlugin({
            name: 'public/common',
            chunks: [
                'public/index',
                'public/start',
                'public/search/list',
                'public/search/map',
                'public/blog/index',
                'public/blog/post',
            ],
            minChunks: 2
        })
    ]
]

И этот конфиг отлично справился со своей задачей.Он нашел общие части в перечисленных модулях и поместил их в account/common.js и public/common.js соответственно.В административных страницах Итак, для административных страниц мне просто нужно было включить account/common.js и %entrypoint%.js.Очевидно, что для общедоступных страниц это были файлы public/common.js и %entrypoint%.js.

. Я пытался воспроизвести это разбиение кода с помощью SplitChunksPlugin, но мне это не удалось.Моя текущая конфигурация:

// Filter chunks for cacheGroups
const includeChunks = (testChunks) => (module, chunks) => {
    return chunks.reduce((result, item) => (result || testChunks.indexOf(item.name) !== -1), false);
};

{
    ...
    entry: ['account/index', ..., 'public/index'],
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'initial',
            minSize: 0,
            maxInitialRequests: 2, //Infinity,
            maxAsyncRequests: Infinity,
            minChunks: 2,
            name(module, chunks, cacheGroupKey) {
                return cacheGroupKey;
            },
            cacheGroups: {
                'default': false,
                'account/common': {
                    test: includeChunks([
                        'account/default',
                        'account/placeGeneral',
                        'account/placeContacts',
                        'account/placeServices',
                        'account/placeRules',
                        'account/placePhoto',
                        'account/placeVideo',
                        'account/sights',
                        'account/placeIndex',
                        'account/index',
                        'account/balance',
                        'account/help',
                        'account/helpVideo',
                        'account/plan/list',
                        'account/plan/edit',
                        'account/room/list',
                        'account/room/edit',
                        //'account/occupancy',
                        //'react-common'
                    ]),
                    reuseExistingChunk: true,
                },
                'public/common': {
                    test: includeChunks([
                        'public/index',
                        'public/start',
                        'public/search/list',
                        'public/search/map',
                        'public/blog/index',
                        'public/blog/post',
                    ]),
                    reuseExistingChunk: true,
                }
            },
        },
    },

    ...
}

Точки входа администратора (account/*) выглядят хорошо:

Вывод веб-пакета

Entrypoint account/plan/list = runtime.js runtime.js.map account/common.js account/common.js.map account/plan/list.js account/plan/list.js.map
Entrypoint account/room/edit = runtime.js runtime.js.map account/common.js account/common.js.map account/room/edit.js account/room/edit.js.map
Entrypoint account/room/list = runtime.js runtime.js.map account/common.js account/common.js.map account/room/list.js account/room/list.js.map

Но публично (place/*) точки входа стали зависеть от блока account/common, потому что некоторые модули используются в обеих частях моего приложения:

Вывод Webpack

Entrypoint public/index = runtime.js runtime.js.map account/common.js account/common.js.map public/index.js public/index.js.map
Entrypoint public/map = runtime.js runtime.js.map account/common.js account/common.js.map public/map.js public/map.js.map
Entrypoint public/place/detail = runtime.js runtime.js.map account/common.js account/common.js.map public/place/detail.js public/place/detail.js.map

И я надеваюне хочу этогоКак настроить плагин SplitChunks и получить следующую файловую структуру?

Entrypoint account/* -> account/common.js, %entrypoint%.js

Entrypoint public/* -> public/common.js, %entrypoint%.js