Mini-css-extract-plugin: What's the difference between filename and chunkFilename options

[ripperdoc]

As the title, it seems sometimes one is used, sometimes the other. Could someone explain?

[michael-ciniawsky]

Async Chunk => chunkFilename e.g import(/* webpackChunkName: "foo" */ './file.css') => foo.css

Sync Chunk (e.g an Entrypoint) => filename => e.g import styles from './file.css' (in entry.js) => entry.css

Code Splitting
import()

[mahmoudZakaria90]

It's the Amazing Lazyload, whenever you find chunk you automatically use it when you want to import it dynamically.

[littlepoolshark]

Finally, I had make a good understood of the difference between them with this awesome answer!!