Webpack 4 splitChunks генерирует несколько CSS

Question

Я пытаюсь сгенерировать несколько CSS, используя webpack 4 min-css-extract-plugin и плагин splitChunks.

Вот мой конфиг вебпака.

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");

module.exports = [{
  entry: './index.js',
  output: {
    filename: '[name].js',
    path: path.resolve(path.join(__dirname, "./dist")),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: false,
        commons: {
          name: 'commons',
          test: /.styl$/,
          chunks: 'all',
          enforce: true,
          minChunks: 1,
        },
        englishStyle: {
          name: 'styles_en',
          test: (c) => {
            return c.type.match(/mini-css-extract-plugin/) && c._identifier.indexOf('_ar') === -1;
          },
          chunks: 'all',
          priority: 1,
          enforce: true,
        },
        arabicStyles: {
          name: 'styles_ar',
          test: (c) => {
            return c.type.match(/mini-css-extract-plugin/) && c._identifier.indexOf('_ar') !== -1;
          },
          priority: 1,
          chunks: 'all',
          enforce: true,
        }
      }
    }
  },
  module: {
    rules: [
      {
        test: /\.styl$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          "stylus-loader"
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].css"
    })
  ]
}]

и вот моя структура файла CSS.

common.styl
  ...

style.styl 
  @import common.styl
  ...

style_ar.styl
  @import common.styl
  ...

index.js
 import styles from style.styl
 import styles from style_ar.styl

Приведенная выше конфигурация генерирует только два файла styles_ar.css и style.css. с общим содержанием в обоих файлах.

Как создать отдельный файл для общего файла?

Если я отдам приоритет commons cacheGroup, то будет сгенерирован только один файл commons.styl.

Answer 1

Это своего рода "отрицательный" ответ, но если вы укажете мне, что я что-то упустил, я его опущу.

1) css, хотя MiniCssExtractPlugin - это своего рода хитрость, которую люди используют, чтобы не создавать файл gulp для создания файлов css - они хотят просто хранить все в одном месте (и писать меньше кода). почему это возможно - все в порядке - но не забывайте, что это все еще хитрость.

Это ваша мотивация? Или в реальной жизни вам нужно включать в процесс производства CSS специфические плагины для веб-пакетов? Я не говорю об autoprefixer - вы также можете использовать post-css из gulp. Но что-то действительно специфическое для веб-пакета? Может быть, какие-то функции времени выполнения веб-пакета?

2) Это не очень хорошая идея, чтобы "заставить" трюк быть чем-то большим, чем трюк.

Примечание: мы не рассматриваем случай, когда вы хотите создать "один смешанный пакет для css и js" - это означает использование css-loader без MiniCssExtractPlugin - это была бы совсем другая история.

Таким образом, ответ таков: используйте стилус непосредственно для создания нужного фрагментированного CSS.

Или попробуйте "более тяжелые трюки": https://github.com/faceyspacey/extract-css-chunks-webpack-plugin