webpack
Additional Assets emitted via `processAssets` hook do not invalidate the build
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
Webpack knows nothing about your assets, you need to add build/file/context/missing dependecies to invalid cache
Or you can update compilation hash, if you provide your plugin code - minimum example I will show how to do it
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?
It is too later to use updateHash, you can just change compilation hash directly, because webpack doesn't know what is entrypoint.css, or you can manually reload page (i.e. send reload message)