Webpack 4 splitChunks 生成多个 css答案

【问题标题】：Webpack 4 splitChunks generating multiple cssWebpack 4 splitChunks 生成多个 css
【发布时间】：2019-02-11 14:33:17
【问题描述】：

我正在尝试使用 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。

【问题讨论】：

这是一个有趣的问题，我什至试图开始赏金，但最后一刻我得到的答案是“webpack 在这种情况下不会增加任何价值 - 直接使用手写笔” ...你能解释一下你对使用 webpack 的 css 有什么期望吗？以及如何加快开发过程——在 js 更改时重新编译 css？
我只是想了解它是如何工作的。实际上，将 webpack 用于 css 有很多优点。例如：就我而言，我在页面中有独立的小部件/组件。我只是导入该组件并在 react 渲染方法中使用，而不用担心加载该组件的样式。
没有得到你提到的 webpack+MiniCssExtractPlugin 的哪些优点。 webpack+MiniCssExtractPlugin 可以为启动 stylus 的 gulp 文件所不能做的反应添加什么？理解这一点很重要。这仅仅是“舒适度”、“更少的代码”还是别的什么？
事实上，当我很确定你根本不需要使用 MiniCssExtractPlugin（提取 css 并单独链接）时，react SPA 就是这种情况......

标签： css webpack webpack-4 webpack-splitchunks

【解决方案1】：

这是一种“否定”的答案，但如果你指出我错过了什么 - 我会放弃它。

1) 尽管 MiniCssExtractPlugin 是一种 css，但人们使用它来不创建用于生成 css 文件的 gulp 文件 - 他们只想将所有内容保存在一个地方（并编写更少的代码）。为什么这是可能的 - 一切都很好 - 但不要忘记这仍然是一个技巧。

这是你的动力吗？或者在现实生活中，您需要将高度特定的 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

【讨论】：