Single-file configuration emits JS assets in its own chunk group

[notpeelz]

Webpack issue here webpack/webpack#7300

---

I tried using the "Extracting all CSS in a single file" configuration from the README.
It works fine for the most part, except that the className mappings (created by css-loader ) are now loaded in a new js file.

I'm not sure if this is a limitation of MCEP or a side-effect of the new webpack splitChunks feature.
Is there any way to have the css mapping modules merged into their parent chunks?

Possibly related to #41

[sokra]

limitation of the splitChunks feature. It may need a type filter.

You should be able to workaround it by passing a function to test:

test: module => module.nameForCondition &&
  /\.css$/.test(module.nameForCondition()) &&
  !/^javascript/.test(module.type)

[notpeelz]

That test rule doesn't get rid of the js file but it shrinks it to 61 bytes:

(window.webpackJsonp=window.webpackJsonp||[]).push([[0],[]]);

Any idea why it doesn't get rid of the JS file entirely?

[yyx990803]

I also ran into this same problem - the 61 byte chunk is small but html-webpack-plugin will attempt to inject it into the HTML.

[notpeelz]

@yyx990803 that's expected. You can exclude the file by manually handling the asset injection (and filtering out JS style assets), but then the SPA doesn't load and fails silently (at least for me it does).

[yyx990803]

@louistakepillz yeah, I ended up with a temporary hack: prepending the content of the chunk to the main entry file.

[fmal]

@louistakepillz i noticed that removing enforce: true results in no extra chunks being generated for css mappings, not sure if it has any negative impact though and why it's needed in the first place 😃

[notpeelz]

@fmal doesn't work for me. Can you share your config?

[ericcirone]

@fmal taking out enforce: true fixes everything for me as well.

[thecrypticace]

Removing enforce: true doesn't work for me because, while everything gets put into one CSS file:

1. It is based on the bundle name not the split chunk name.
2. None of the defined CSS chunks get split into separate files. They're all fed into the CSS file named after the entry.

[thecrypticace]

Here's a repo: https://github.com/thecrypticace/webpack-css-chunks-test/tree/e2980de31d3bbed3630b36975da841f61e595e05