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是一种技巧，人们不使用它来创建用于生成css文件的gulp文件-他们只希望将内容保存在一个地方（并编写更少的代码）。为什么这样做是可能的-一切都很好-但请不要忘记，这仍然是一个把戏。

这是你的动力吗？还是在现实生活中，您需要将高度特定的Webpack插件包含到CSS生产过程中？我不是在说自动前缀-您也可以使用gulp中的post-css。但是真正针对webpack的东西？可能是一些webpack运行时功能？

2）把一个技巧“强加”为绝招不是一个好主意。

注意：当您要创建“用于css和js的混合包”时-我们不讨论这种情况-这意味着使用css-loader而不使用MiniCssExtractPlugin-情况将完全不同。< / p>

所以答案是：直接使用手写笔生成所需的分块CSS。

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

Webpack 4 splitChunks生成多个CSS

1 个答案: