Webpack-4 MiniCssExtractPlugin splitChunks

Question

Я пытаюсь заставить оптимизацию splitChunks Webpack-4 сделать это:

1. Поместить все JS & CSS не в какую-либо точку входа, а использовать более одного раза в общие файлы (CSS & JS).
2. Объедините все CSS, созданные MiniCssExtractPlugin из компонентов Vue, в один и тот же общий файл CSS.

У меня это работает (ниже), но эффект второго правила "extractStuff"это поместить весь код точки входа в общий блок, что я и пытаюсь предотвратить с помощью этого «теста».Файлы «точки входа» - это просто заглушки веб-пакетов, и все в общем файле, даже если он используется только один раз.Это работает, но не элегантно.

Кто-нибудь знает, как исключить точки входа из этого второго правила, или есть лучший способ сделать это в целом?

Кто-нибудь знает, гдеопределение этих «модулей, кусков» объектов, как, возможно, я могу сделать этот тест лучше, как.

splitChunks: {

    cacheGroups: {     // Idea from github.com/webpack/webpack/issues/7230
        mainJS: {
            test: /\.js$/,
            name: "commons",
            chunks: "all",
            minChunks: 2,   // Makes it leave entry point JS alone.
            minSize: 0,
            priority: 20,
            enforce: true
        },
        extractedStuff: {
            test: (module, chunks) => module.depth > 0, 
            name: "commons", // Append to same file as previous rule.
            chunks: "all",
            minChunks: 1,   // ..or single-use CSS is not bundled.
            minSize: 0,
            priority: 10,
            enforce: true
        }
}

},

Answer 1

Я возлюсь с этим, но вот как я исправил свою проблему ...

Проблема с вышесказанным заключается в том, что запись extractStuff портит связывание, потому что для minChunks обязательно установлено значение 1. Этозапись должна быть удалена: я не могу комбинировать извлеченный CSS таким образом.

Я экспериментировал с созданием плагина для комбинирования CSS самостоятельно, но проблема в том, что он оставляет его без дедупликации: таким образом вы получаете несколько копий CSS.

Вместо этого, кажется, это работает отлично, взято из совета Mini-Css-Extract-Plugin.

      cacheGroups: {
            mainJS: {
                test: /\.js$/,
                name: "commons",
                chunks: "all",
                minChunks: 2,
                minSize: 0,
                priority: 20,
                enforce: true
            },
            extractedCSS: {
                test: (module, chunks) => module.constructor.name === 'CssModule',
                name: "commons",
                chunks: "all",
                enforce: true
            }
        }