Concatenating multiple css files breaks js file

[webpack-bot]

Bug report

What is the current behavior?
I am trying to extract multiple css files from js files and concatenate it into one css file. I use this documentation https://webpack.js.org/plugins/mini-css-extract-plugin/#extracting-all-css-in-a-single-file. The css files extracted and concatenated well, but after it, js files from which it extracted breaks, i.e. it stops executing at all.

If the current behavior is a bug, please provide the steps to reproduce.
I created repo and left only css-loader and optimization section. When optimization section commented out, js correctly executed and in console 'it works' appears. But when optimization uncommented, js doesn't executed and console stays empty
Steps to reproduce

git clone https://github.com/felixcatto/webpack_bug.git
cd webpack_bug
npm i
npx webpack-dev-server

What is the expected behavior?
Expected result: js at index.js should be executed, i.e. you should see 'it works' in console
Actual result: js doesn't executed, because you don't see anything in console

Other relevant information:
webpack version: 4.44.1
Node.js version: 12.18.2
Operating System: ubuntu, 16.04

---

This issue was moved from webpack/webpack#11436 by @evilebottnawi. Original issue was by @felixcatto.

[ik9999]

Try this solution:
#408 (comment)

[felixcatto]

Big thanks for this link. Unfortunately solution that you mentioned doesn't work for me. It works if i have one js file, but the goal is to extract css from multiple js files. When i added another file i get a error

But another solution from this comment is work for me - #408 (comment)

So now i have a question.
I have two entry files, and third extracted css file

  entry: {
    'main': ...,
    'side': ...,
  },

Why webpack generate additional fourth index file?

And why i need to add it in my html?

I changed repo. So you can look at this fourth file

git clone https://github.com/felixcatto/webpack_bug.git
cd webpack_bug
npm i
npx webpack

Also in docs there is nothing about generating and adding additional file to html

[alexander-akait]

@felixcatto please report about this in html-webpack-plugin, our scope is CSS, anyway in future we will add built-in HTML supporting, so you will not have the same problems

[felixcatto]

If you look at repo, it doesn't contain this plugin. How i can report it in html-webpack-plugin, if i don't use it ? :)
It is a webpack issue, but you moved it here, and now proposes to move it in a more inappropriate place. You can close it, if you don't care about this issue. At least we have a workaround.

[pkaruovic]

Looks like adding splitChunks.cacheGroups.[chunkName].type='css/mini-extract' to the optimization fixes it.

[alexander-akait]

Yep, fixed in webpack@5 and in the latest mini-css-extract-plugin version, index was created because you use name: 'index',, name should have extension at the end of file index.css

And yes, using type: 'css/mini-extract', is better then test I will update docs