css - Webpack 4 splitChunks 生成多个 css

Question

我正在尝试使用 webpack 4 min-css-extract-plugin 和 splitChunks 插件生成多个 css。

这是我的 webpack 配置。

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 文件 - 他们只想将所有内容保留在一个地方(并编写更少的代码)。为什么这是可能的 - 一切正常 - 但不要忘记这仍然是一个技巧。

这是你的动机吗？或者在现实生活中您需要将高度特定的 webpack 插件包含到 css 生产过程中？我不是在谈论 autoprefixer - 你也可以使用 gulp 中的 post-css。但是真的是 webpack 特有的吗？可能是一些 webpack 运行时特性？

2)“强制”一个技巧不仅仅是技巧，这不是一个好主意。

注意:当您想为 css 和 js 创建“一个混合包”时，我们不涵盖这种情况 - 这意味着使用 css-loader没有 MiniCssExtractPlugin - 这将是一个完全不同的故事。

所以答案是:直接用stylus生成你想要的chunked css。

或者尝试“更重的技巧”:https://github.com/faceyspacey/extract-css-chunks-webpack-plugin