[4.0.0-beta.0] emitting empty CSS files when using dynamic import

[wKovacs64]

General:

When using dynamic import() code-splitting, ETWP creates an empty (0 byte) CSS file for the main entry point (e.g. main.css) even if no CSS was imported. Additionally, if using optimization.splitChunks.chunks: "all" to split initial chunks in addition to async, it creates an empty CSS file for vendors as well (e.g. vendors~main.css) even if no vendor (node_modules) CSS was imported. I'm assuming these two cases are the same root problem, I just don't know enough about how it works to know for sure.

Real-world use case:

I include CSS from node_modules in my entry point, which gets split into vendors~main.css as expected, but ETWP also creates an empty main.css when I don't have any local CSS imports.

Reproduction repo:

https://github.com/wKovacs64/etwp-empty-files-demo

Versions:

extract-text-webpack-plugin: 4.0.0-beta.0
webpack: 4.0.1

[AlexandrMardanov]

Getting same after enabling runtimeChunk. If the dynamic module (or even simple import to entry) has it's own styles - build creates:

runtime~main.fe0bed.bundle.css 1.1 KB
main.eae8da.bundle.css 1.3 KB

And if I move styles to entry js (not imported module):

runtime~main.d41d8c.bundle.css 299 B (empty)
main.fb1102.bundle.css 1.3 KB

Looks like runtime.css has only imported styles from module, while main.css all other styles including runtime.

[woutervanvliet]

The runtime css file surprised me as well, but an empty main.css is pretty much what I'd expect - if there were no styles emitted at that point.

After all, one would include a in the HTML if you expect styles there. Not writing a main.css file would/could result in a 404.

I guess the same logic applies to runtime.css?

[wKovacs64]

I wouldn't expect a file to be emitted at all. And no link added to the HTML, either (so no 404). That's how the previous version behaved, anyway. Why generate additional requests for empty files?

[woutervanvliet]

I see your point ;-).

Kinda appreciate the certainty still, that every entrypoint results in an output css file. If you don't want to use it, check if the file is empty and then don't put it in your html.

[wKovacs64]

I'm using html-webpack-plugin (like a lot of people, I assume), so it would need to provide an option for skipping empty files if ETWP emitting them is indeed intentional.

[yangmingshan]

Getting same problem, extract-text-webpack-plugin 4.0.0-beta.0 will extract empty runtime and vendor CSS.

[lili21]

You can try mini-css-extract-plugin

[wKovacs64]

You can try mini-css-extract-plugin

I'm sure mini will be great, but right now it's in its infancy and missing some key features like [contenthash] in filenames for aggressive long-term caching.

[lili21]

missing some key features like [contenthash]

and also doesn't support HMR.

[yangmingshan]

There is a reproducible example: https://github.com/yangmingshan/react-demo/tree/next
run npm run build will generate three empty CSS

[KnisterPeter]

Using this as well may help with your problems:
https://github.com/KnisterPeter/html-webpack-exclude-empty-assets-plugin

Just add new HtmlWebpackExcludeEmptyAssetsPlugin() to you webpack plugins.
It will remove all empty assets (which includes empty css files).
Make sure the plugins is added after the HtmlWebpackPlugin.