Additional Assets emitted via processAssets hook do not invalidate the build

[abettadapur]

Bug report

I have a custom plugin that emits CSS modules compilation.hooks.processAssets, and these are derived from source code processed by Webpack. The loader returns a JS object containing the classnames used. If I add new CSS rules, these classnames do not change, but the emitted CSS does change.

If additional assets assets change during an incremental compile, Webpack Dev Sever sends a still-ok message to the client, and nothing reloads. I believe this is because additional assets are not included in the compilation hash, so it remains the same

Can we make webpack dev server take into account additional assets as well?

Actual Behavior

Change a source file that affects the output of additional assets. See that webpack dev server reports nothing has changed

Expected Behavior

Webpack dev server should see that additional assets have changed, and reload the page

How Do We Reproduce?

Create a plugin that emits additional assets based on input modules. Change one of the input modules. See that webpack dev server does not refresh the page

Please paste the results of npx webpack-cli info here, and mention other relevant information

webpack dev server 5.0.4
webpack 5.91.0

Is there another way I should be emitting assets like this? I've resorted to adding a hash in comments of the returned JS file

[alexander-akait]

Webpack knows nothing about your assets, you need to add build/file/context/missing dependecies to invalid cache

[alexander-akait]

Or you can update compilation hash, if you provide your plugin code - minimum example I will show how to do it

[abettadapur]

Sorry for the delayed response. Thanks for replying!

We use this custom plugin to generate CSS for our app. I would love to use the builtin/standard loaders, but the CSS process at my company is unfortunately very bespoke, and it was difficult to make those work properly

The basic setup is as follows

• Loader on *.css files returns cssmodule exports to Javascript

const jsModuleExports = compileCSS(source);
return jsModuleExports

• Plugin runs to emit an additional CSS asset by collecting the .css files that were added to a given entrypoint

 compilation.hooks.additionalAssets.tapAsync(PLUGIN_NAME, (callback) => {
     for (const [name, entrypoint] of compilation.entrypoints) {
        const usedCssModules: webpack.NormalModule[] = getSourceModulesForEntryPoint(
          compilation,
          entrypoint,
          (module) => module.resource!.endsWith('.css'),
       )
      

      //use usedCSSMdoules paths to generate a css file
     //then emit it
    compilation.emitAsset("entrypoint.css", new webpack.sources.RawSource(cssOutput)
})

The problem occurs when I just change the CSS content (add a rule to an existing selector), the jsModuleExports does not change, so the compilation hash doesn't change

I also tried tapping into the updateHash hook, but this runs before additionalAssets

Is there a better hook I should be using?