<h1 dir="auto">Bug report</h1>




<p dir="auto"><strong>What is the current behavior?</strong></p>
<p dir="auto">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.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/963776/96571192-8a20d280-12cb-11eb-9e63-1e043da11b0a.png"><img src="https://user-images.githubusercontent.com/963776/96571192-8a20d280-12cb-11eb-9e63-1e043da11b0a.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/963776/96571294-aae92800-12cb-11eb-9314-8194c936ec96.png"><img src="https://user-images.githubusercontent.com/963776/96571294-aae92800-12cb-11eb-9314-8194c936ec96.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Another issue is if I give <code class="notranslate">name: 'styles'</code> for <code class="notranslate">cacheGroup.styles</code> I'll get an error. This happens with any cacheGroup if I give <code class="notranslate">name</code> (which I had previously for WP4).</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/963776/96570281-745edd80-12ca-11eb-84c8-7349090cf028.png"><img src="https://user-images.githubusercontent.com/963776/96570281-745edd80-12ca-11eb-84c8-7349090cf028.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">I have a third problem. It seems like <code class="notranslate">css-minimizer-webpack-plugin</code> 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 <code class="notranslate">optimize-css-assets-webpack-plugin</code>.</p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong></p>






<p dir="auto">Here are my CSS related configs.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="{
    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 =&gt; {
                     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 =&gt; {
                                 return {
                                     css: result.css,
                                     map: result.map,
                                     warnings: result.warnings()
                                 }
                             })
                     )
                 }
            })
        ]
    }
}"><pre class="notranslate"><code class="notranslate">{
    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 =&gt; {
                     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 =&gt; {
                                 return {
                                     css: result.css,
                                     map: result.map,
                                     warnings: result.warnings()
                                 }
                             })
                     )
                 }
            })
        ]
    }
}
</code></pre></div>
<p dir="auto"><strong>What is the expected behavior?</strong></p>
<p dir="auto">All CSS is extracted into a single file and <code class="notranslate">css-minimizer-webpack-plugin</code> is running through fine.</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.1.3</p>
<h1 dir="auto">Bug report</h1>
<p dir="auto"><strong>What is the current behavior?</strong><br>
If <a href="https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro/blob/main/webpack.config.js#L15">using contenthash</a> with a <a href="https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro/blob/main/index.js#L1">WebWorker</a> and any plugin is calling <a href="https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro/blob/main/minimalplugin.js#L22">Maintemplate.prototype.hook.localVars</a> such as the <a href="https://github.com/waysact/webpack-subresource-integrity/blob/main/webpack-subresource-integrity/index.ts#L168">webpack-subresource-integrity plugin</a>, the runtime starts requesting for undefined when it tries to load the web worker chunk both observed in the console and from <a href="https://github.com/webpack/webpack/blob/main/lib/runtime/GetChunkFilenameRuntimeModule.js#L240">adding logging in webpacks source</a> .</p>
<p dir="auto">Since this is happening as a sideeffect of calling .tap, I think the issue lies downstream of </p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/webpack/webpack/blob/c181294865dca01b28e6e316636fef5f2aad4eb6/lib/RuntimePlugin.js#L365">webpack/lib/RuntimePlugin.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 365
      in
      <a data-pjax="true" class="commit-tease-sha" href="/webpack/webpack/commit/c181294865dca01b28e6e316636fef5f2aad4eb6">c181294</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L365" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="365"></td>
          <td id="LC365" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">mainTemplate</span><span class="pl-kos">.</span><span class="pl-c1">hooks</span><span class="pl-kos">.</span><span class="pl-c1">localVars</span><span class="pl-kos">.</span><span class="pl-en">isUsed</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">||</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
 but I'm not sure.<p></p>
<p dir="auto">This is related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="967970393" data-permission-text="Title is private" data-url="https://github.com/waysact/webpack-subresource-integrity/issues/165" data-hovercard-type="issue" data-hovercard-url="/waysact/webpack-subresource-integrity/issues/165/hovercard" href="https://github.com/waysact/webpack-subresource-integrity/issues/165">waysact/webpack-subresource-integrity#165</a><br>
This is also possibly related to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="945535628" data-permission-text="Title is private" data-url="https://github.com/webpack/webpack/issues/13801" data-hovercard-type="issue" data-hovercard-url="/webpack/webpack/issues/13801/hovercard" href="https://github.com/webpack/webpack/issues/13801">#13801</a></p>
<p dir="auto"><strong>If the current behavior is a bug, please provide the steps to reproduce.</strong><br>
Minimal Reproduction: <a href="https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro">https://github.com/AprilArcus/webpack-sri-workers-contenthash-repro</a></p>
<ol dir="auto">
<li>Use a worker with the new webpack 5 worker API</li>
<li>Use contentHash in output.chunkFileName</li>
<li>Create a plugin that simply taps into maintemplate.hook.localVars</li>
</ol>





<p dir="auto"><strong>What is the expected behavior?</strong><br>
Expected Behavior:  It shouldn't be putting undefined in the runtime for this chunk</p>


<p dir="auto"><strong>Other relevant information:</strong><br>
webpack version:  5.50.0<br>
Node.js version: 16.6.0<br>
Operating System: macos / ubuntu<br>
Additional tools: none</p>