Does not cooperate with contenthash in MiniCssExtractPlugin's filename option

[RentecTravis]

Thank you for this project. It's very valuable for user experience and I appreciate that you've filled this gap. I'm surprised this technique isn't more widely sought.

The issue

In the plain-webpack example webpack.config.js, change the filename option from this

new MiniCssExtractPlugin({
    filename: '[name].css'
}),

to this

new MiniCssExtractPlugin({
    filename: '[name].[contenthash:8].css'
}),

Then run npm run start

Expected result

Output like example-desktop.[12345678].css

Actual result

output files like example-desktop.[contenthash

Additional info

Interestingly, this works

new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
}),

And I'm able to set output.hashDigestLength = 8, to get the desired hash length in the generated files. So we have a workaround that's viable for some situations, but perhaps not all.

[vyprichenko]

@RentecTravis, you could solve this by setting output.hashDigestLength globally (if it is acceptable) — according to the sources, this setting is taken into account. After hash computation, substring "[contenthash]" or "[chunkhash]" in the file name is simply replaced with hash value, this is why "[contenthash:8]" is not processed correctly.

Also, an issue with a filename option of type "function" exists. According to MiniCssExtractPlugin docs, filename can be of type String|Function, and it works like Webpacks output.filename. But MediaQueryPlugin assumes it is always a string, which results in an exception.

Perhaps, the latter can be fixed like this (moving this below chunk evaluation):

const filename = typeof this.options.filename == 'function'
    ? this.options.filename({ chunk })
    : this.options.filename;

const basename = filename
    .replace('[name]', mediaKey)
    .replace(/\[(content|chunk)?hash\]/, hash)
    .replace(/\.[^.]+$/, '');

[designcise]

maybe in the next version you should also consider adding (content|chunk|full)?hash ? fullhash is not picked up at the moment