Looks like plugin overwrites some files without errors/warnings

[krutoo]

• Operating System: Ubuntu
• Node Version: 14.16.0
• NPM Version: 7.20.0
• webpack Version: 5.48.0
• mini-css-extract-plugin Version: 2.2.0

Expected Behavior

Accorging to docs:
https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-css-based-on-entry

I have two entry points in webpack config (desktop and mobile) with optimization like in article.

In each JS entry i have css imports (css-modules)

I expect to get something in dist folder similar to:

dist
├── mobile
│   ├── index.js
│   └── index.css
└── desktop
    ├── index.js  
    └── index.css

Actual Behavior

In my dist folder after build i have:

dist
├── mobile
│   └── index.js
├── desktop
│   └── index.js  
└── mobile_styles
    └── index.css

There is also no "styles_desktop" folder or something similar with desktop styles.

How Do We Reproduce?

Repo with example project here:
https://github.com/krutoo/mini-css-extract-plugin-tests

[alexander-akait]

1. Change import styles from './module.module.css'; on import styles from './desktop.module.css'; in src/desktop.jsx, because you just don't have module, so no CSS chunks in output
2. Also you don't need recursive searcher for webpack v5, just use:

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

module.exports = {
  mode: 'development',
  entry: {
    mobile: './src/mobile.jsx',
    desktop: './src/desktop.jsx',
  },
  output: {
    clean: true,
    filename: '[name]/index.js',
    path: path.resolve(__dirname, 'dist'),
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]/index.css',
    }),
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
      {
        test: /\.module\.css/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: '[path][name]__[local]--[hash:base64:3]',
              },
            },
          },
        ],
      },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        desktopStyles: {
          type: "css/mini-extract",
          name: 'desktop',
          chunks: (chunk) => {
            return chunk.name === "desktop"
          },
          enforce: true,
        },
        mobileStyles: {
          type: "css/mini-extract",
          name: 'mobile',
          chunks: (chunk) => {
            return chunk.name === "mobile"
          },
          enforce: true,
        },
      },
    },
  },
};

Also you can found src_common_jsx with commons modules due import()

[krutoo]

@alexander-akait How can i create only two css files for top entries? Even its uses common module
(i want to copy styles of common module to both of result css files)

[alexander-akait]

using reuseExistingChunk

[krutoo]

using reuseExistingChunk

I trying to add it like this:

module.exports = {
optimization: {
    splitChunks: {
      cacheGroups: {
        desktopStyles: {
          type: 'css/mini-extract',
          name: 'desktop',
          chunks: chunk => chunk.name === 'desktop',
          enforce: true,
          reuseExistingChunk: true,
        },
        mobileStyles: {
          type: 'css/mini-extract',
          name: 'mobile',
          chunks: chunk => chunk.name === 'mobile',
          enforce: true,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

But i still have dist folder with three css files:

dist
├── mobile
│   └── index.css
├── desktop
│   └── index.css  
└── src_common_jsx
    └── index.css

What am i doing wrong?

[alexander-akait]

You need duplicate module in both files, i.e. mobile and desktop?

[alexander-akait]

I recommend avoid it, bad for performance

[krutoo]

I need it to create critical css for each entry (mobile, desktop) with Module Federation bootstrap.

In my project i have index file (entry) that dynamically imports "bootstrap" file like here:
https://webpack.js.org/concepts/module-federation/#uncaught-error-shared-module-is-not-available-for-eager-consumption

[alexander-akait]

For critical CSS you need another tool than splitting by entries... anyway you use dependeOn and move common code to own entry and use chunks: chunk => chunk.name === 'mobile' || chunk.name === 'common' to keep code for each or improve logic test, there are many techniques to achieve this

[alexander-akait]

Or you can import './common' instead import('./common'), because common in this case is initial chunks (you need to load this before mobile and desktop, otherwise you will have invalid order), or you can do all async chunks and load common then mobile/desktop

[alexander-akait]

Here example where common inside each chunk #822

[krutoo]

Or you can import './common' instead import('./common'), because common in this case is initial chunks (you need to load this before mobile and desktop, otherwise you will have invalid order), or you can do all async chunks and load common then mobile/desktop

Thank you for your answer.

As far as I understood, dynamic import of bootstrap file is required in the case of using module federation.