Could not achieve the same results as I had with `extract-text-webpack-plugin`

[coderaiser]

Feature Proposal

Ability to use the same api as extract-text-webpack-plugin has.

Feature Use Case

Generating mentioned in list css files to dist directory.

Please paste the results of npx webpack-cli info here, and mention other relevant information

Here is my current webpack v4 output:

Child HtmlWebpackCompiler:
     1 asset
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./html/index.html] 2.69 KiB {HtmlWebpackPlugin_0} [built]
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/columns/name-size-date.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/columns/name-size-date.css] 417 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/columns/name-size.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/columns/name-size.css] 421 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/config.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/config.css] 1.98 KiB {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/main.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./font/DroidSansMono.eot] 81 KiB {0} [built]
    [./font/DroidSansMono.woff] 97.9 KiB {0} [built]
    [./font/DroidSansMono.woff2] 78.5 KiB {0} [built]
    [./font/fontello.eot] 18.9 KiB {0} [built]
    [./font/fontello.svg] 17.1 KiB {0} [built]
    [./font/fontello.ttf] 18.6 KiB {0} [built]
    [./font/fontello.woff] 11.5 KiB {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/help.css] 397 bytes {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/icons.css] 2.74 KiB {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/main.css] 1.26 KiB {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/query.css] 4.63 KiB {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/reset.css] 668 bytes {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/style.css] 4.29 KiB {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/supports.css] 379 bytes {0} [built]
    [./node_modules/css-loader/dist/cjs.js!./css/urls.css] 5.63 KiB {0} [built]
        + 11 hidden modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/nojs.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/nojs.css] 473 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/terminal.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/terminal.css] 269 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/user-menu.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/user-menu.css] 706 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!css/view.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
    [./node_modules/css-loader/dist/cjs.js!./css/view.css] 609 bytes {0} [built]
        + 1 hidden module
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!node_modules/@cloudcmd/modal/css/modal.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
       6 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!node_modules/smalltalk/css/smalltalk.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename
       5 modules
Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/dist/cjs.js!node_modules/supermenu/css/supermenu.css:
    Entrypoint undefined = extract-text-webpack-plugin-output-filename

Here is my webpack v4 config and here is webpack v5 config.

Could you please help me to migrate to mini-css-extract-plugin and achieve the same flexibility I had with extract-text-webpack-plugin, which helped me to generate all css files in dist directory and then just lazy load them when they needed with one common.css which is loaded by default.

[alexander-akait]

I achieved this with webpack since it uses key-value pairs, but I cannot migrate to v5 because old plugins unsupported and new https://github.com/webpack-contrib/mini-css-extract-plugin/issues/1013 while developing Cloud Commander.

Not sure why did you said it, because we support it and have always supported it, please read documentation, sorry no one will write code for you, there are a lot of example for splitting code, for example - https://github.com/webpack-contrib/mini-css-extract-plugin#extracting-css-based-on-entry, you can configure it as you want, it is very flexibility

[coderaiser]

@alexander-akait this is amazing that you responded after couple month that "no one will write code for me", but I usually write code for my consumers, and don't think that this is a problem 🤷‍♂️.

[alexander-akait]

@coderaiser Sorry, what are you waiting for? Have you provided any attempts to achieve this behavior, no attempts (only code that someone needs to understand) and expecting someone to write it for you? Looks pretty disrespectful. I always help everyone, you can see it in my activity. But here I have to spend enough time to understand what you have written, then guess what you expect, and solve this problem for you (sorry stats output is not helpful here). If you provide a more detailed description of what you have and what you expect and what problem you are facing, then I will undoubtedly help you.

I provided you a link on how you can split files and how it is configured with examples, further actions is a setting with the wishes that you need, but no one else but you knows this.

[coderaiser]

@alexander-akait could you please help me with migration? As I see generated css names relates to entry:

keep your CSS bundled according to entry

module.exports = {
  entry: {
    foo: path.resolve(__dirname, "src/foo"),
    bar: path.resolve(__dirname, "src/bar"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        fooStyles: {
          type: "css/mini-extract",
          name: "styles_foo",
          chunks: (chunk) => {
            return chunk.name === "foo";
          },
          enforce: true,
        },
        barStyles: {
          type: "css/mini-extract",
          name: "styles_bar",
          chunks: (chunk) => {
            return chunk.name === "bar";
          },
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
  ],
};

But I have much more css files to generate that entries I have:

    'nojs',
    'view',
    'config',
    'terminal',
    'user-menu',

Is it possible to generate more files that entries I have?