Issue 1:
Bug report

What is the current behavior?

After migrating to Webpack 5 my CSS doesn't get extracted into a single file. It is chunked across multiple files. I do feel all my issues are caused by the same source.

Another issue is if I give name: 'styles' for cacheGroup.styles I'll get an error. This happens with any cacheGroup if I give name (which I had previously for WP4).

I have a third problem. It seems like css-minimizer-webpack-plugin is being ignored. If you take a look on the second picture, the plugin supposed to remove the duplicates. One note to add here that I migrated from optimize-css-assets-webpack-plugin.

If the current behavior is a bug, please provide the steps to reproduce.

Here are my CSS related configs.

{
plugins: [
new MiniCssExtractPlugin({
filename: '[contenthash].css',
ignoreOrder: true
})
],
optimization: {
runtimeChunk: 'single',
splitChunks: {
maxAsyncRequests: 25,
maxInitialRequests: 25,
automaticNameDelimiter: '~',
maxSize: 800000,
cacheGroups: {
commons: {
chunks: 'all',
test: /node_modules/,
priority: -10,
minSize: 100000
},
styles: {
test: /\.s?css$/,
chunks: 'all',
enforce: true,
reuseExistingChunk: true,
priority: 10
}
}
},
minimize: true,
minimizer: [
new CSSMinimizerWebpackPlugin({
sourceMap: true,
test: /\.css$/g,
minify: data => {
const [[filename, input]] = Object.entries(data)
// cssnano will remove duplicates
return (
require('cssnano')
.process(input, {
preset: ['default', { discardComments: { removeAll: true } }],
from: filename
})
// mqpacker will merge media queries and moves to the end
.then(function (cssnanoResult) {
return require('mqpacker').process(cssnanoResult, {
sort: true,
from: filename
})
})
.then(result => {
return {
css: result.css,
map: result.map,
warnings: result.warnings()
}
})
)
}
})
]
}
}

What is the expected behavior?

All CSS is extracted into a single file and css-minimizer-webpack-plugin is running through fine.

Other relevant information:

webpack version: 5.1.3

Issue 2:
Bug report

What is the current behavior?

If using contenthash with a WebWorker and any plugin is calling Maintemplate.prototype.hook.localVars such as the webpack-subresource-integrity plugin, the runtime starts requesting for undefined when it tries to load the web worker chunk both observed in the console and from adding logging in webpacks source .

Since this is happening as a sideeffect of calling .tap, I think the issue lies downstream of

webpack/lib/RuntimePlugin.js

Line 365
in
c181294

mainTemplate.hooks.localVars.isUsed() ||

but I'm not sure.

This is related to waysact/webpack-subresource-integrity#165

This is also possibly related to #13801

If the current behavior is a bug, please provide the steps to reproduce.

Minimal Reproduction: https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro

Use a worker with the new webpack 5 worker API

Use contentHash in output.chunkFileName

Create a plugin that simply taps into maintemplate.hook.localVars

What is the expected behavior?

Expected Behavior: It shouldn't be putting undefined in the runtime for this chunk

Other relevant information:

webpack version: 5.50.0

Node.js version: 16.6.0

Operating System: macos / ubuntu

Additional tools: none