Webpack 4 splitChunks generating multiple css

Question

I'm trying to generate multiple css using webpack 4 min-css-extract-plugin and splitChunks plugin.

Here is my webpack config.

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"
    })
  ]
}]

and here is my css file structure.

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

The above configuration is generating only two files styles_ar.css and style.css. with common content in both the files.

How do I generate a separate a file for common file?

If I give priority to commons cacheGroup It will generate only one file commons.styl.

This is an interesting question and I even have tried to start a bounty on it but at last moment I got that answer would be "webpack doens't add any value in this case - use stylus directly"... Can you explain what you expect from using webpack for css ? and how you would speed up dev process - recompile css on js changes? — Roman Pokrovskij, Sep 17 '18 at 21:57
I'm just trying to learn how it works. Actually there are lot of advantages for using webpack for css. Eg: In my case I have standalone widgets/components in pages. I just import that component and use in the react render method without worrying about loading the styles of that component. — SAGAR TALLA, Sep 18 '18 at 06:56
didn't get which advantages of webpack+MiniCssExtractPlugin you are mentionig. what webpack+MiniCssExtractPlugin can add for react comenents that gulp file that starts stylus couldn't do? this is important to understand. is this only "level of comfort", "less code" or something else? — Roman Pokrovskij, Sep 18 '18 at 08:42
in fact, react SPA is the case when I'm quite sure that you do not need to use MiniCssExtractPlugin (exctract css and link it separatly) at all... — Roman Pokrovskij, Sep 18 '18 at 12:41

Roman Pokrovskij · Answer 1 · 2018-09-18T08:46:05.843

This is a kind of "negative" answer but if you will point me that I miss something - I will drop it.

1) css though MiniCssExtractPlugin is a kind of trick that people uses to do not create gulp file for generating css files - they want just to keep everithing in one place (and write less code). why this is possible - all is ok - but do not forget this is still a trick.

Is this your motivation? Or in real life you need to include highly specific webpack plugins into css production process? I'm not talking about autoprefixer - you can use post-css from gulp also. But something really webpack specific? May be some webpack runtime features?

2) This is not a good idea to "force" a trick to be something more than trick.

Note: we are not cover the case when you want to create "one mixed bundle for css and js" - that means use css-loader without MiniCssExtractPlugin - it would be a totally different story.

So the answer is: use stylus directly to generate a chunked css you want.

Or try "more heavy tricks": https://github.com/faceyspacey/extract-css-chunks-webpack-plugin

Webpack 4 splitChunks generating multiple css

1 Answers1