webpack-contrib/mini-css-extract-plugin

Missing assets in entrypoint.auxiliaryAssets part of stats object

geldmacher opened this issue · 10 comments

geldmacher commented

Bug report

Missing assets in entrypoint.auxiliaryAssets part of stats object in production mode if experimentalUseImportModule option is true and assets are part of an file imported in main entrypoint file.

Actual Behavior

Referenced files in imported css files are not part of the auxiliaryAssets array, if experimentalUseImportModule option is true.

Expected Behavior

Referenced files in imported css files should be part of the auxiliaryAssets array, if experimentalUseImportModule option is true.

How Do We Reproduce?

See console output for npm run prod: https://github.com/geldmacher/webpack_mini-css-extract-plugin_issue_test_repo
The font files are missing with experimentalUseImportModule: true

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

System:

  • OS: Linux 5.10 Ubuntu 20.04.4 LTS (Focal Fossa)
  • CPU: (8) x64 Intel(R) Core(TM) i7-10610U CPU @ 1.80GHz
  • Memory: 8.18 GB / 11.69 GB

Binaries:

  • Node: 17.9.0 - /home/linuxbrew/.linuxbrew/bin/node
  • npm: 8.5.5 - /home/linuxbrew/.linuxbrew/bin/npm

Packages:

  • css-loader: ^6.7.1 => 6.7.1
  • webpack: ^5.72.0 => 5.72.0
  • webpack-cli: ^4.9.2 => 4.9.2
alexander-akait commented

Yes, it is expected, experimentalUseImportModule doesn't contain auxiliaryAssets, they are emitted as normal assets

geldmacher commented

Ah , ok. Is there any other way to connect assets to entrypoints? I am generating list of assets in connection to their entrypoints. With experimentalUseImportModule it is impossible to allocate some assets like in my example. Or am i missing something?

alexander-akait commented

In theory they are stored in module so you can get them using chunkGraph, but it can be tricky, can you describe why you need it? Maybe I can provide better solution

geldmacher commented

Sure, Thanks! =)

I am using this package (https://github.com/ztoben/assets-webpack-plugin) to generate a list (json) of assets per entrypoint. I need this list to connect the generated Webpack assets to the backend logic of my PHP system. In this system in using entrypoints for two different aspects of the generated frontend.

  1. App shell (Everything for the web frontend which persists on every page of the website, like eg navigation)
  2. Content Elements (Each Element is a component with its own allocated assets like js, css, images, fonts)

My PHP system takes care of an optimized loading procedure of these two aspects in conjunction with their assets. This includes eg resource links with instructions on how to load the assets (preload, prefetch, etc.). The goal is to only load what is really needed on the specific page of the website. In case this isn't clear by now, i am not building SPA's or similar. It's more like static site generation based on a PHP CMS, with optimized assets handling in the frontend. =)

Both, App shell and components, are entrypoints in my Webpack logic.

So, if i don't know which assets belongs to which entrypoint or chunk, i am not able to load them in an optimized way (eg together with a preload resource loading hint).

alexander-akait commented

You can't rely on it, assets can be used in 2/3/4/etc entrypoints, plugins can add them too, I recommend to use assets like assets["file.ext"] in your application

geldmacher commented

Thanks for your answer. =)
But might you elaborate a bit on it? I am not sure what you mean with assets like assets["file.ext"] ...

geldmacher commented

If i don't get it wrong this package "only" generates a mapping from origin to optimized asset. This is not what i need because i need to know which asset belongs to which entrypoint and chunk after Webpack did it's thing (With all used plugins). This worked really well until i used this experimental flag. =)

The most common use case is the web font inside a css file. But eg background images are important, too. This last use case seems to work btw. But i guess this is because i am using a plugin which optimizes images (image-minimizer-webpack-plugin) and is placing the result in auxiliaryAssets again.

alexander-akait commented

I am afraid it is not possible to do it in right way, modules can have multiple issuers (you can collect them if you need in plugin and create this file, you can't rely on stats to create that file, you can open an issue in assets-webpack-plugin and ask developer(s) to implement it), and I am afraid it is out of scope current plugin. Why it is not working with experimental flag? Because now we execute modules on Node.js side and recreate new module, it is better for perf and allow more things, I don't know what we can do here. https://github.com/ztoben/assets-webpack-plugin/blob/master/index.js#L209 is wrong hook to create manifest, even more, if you will have plugin for generation (for example image-minimizer-webpack-plugin as you written above) some assets will be without entrypoint, because you don't import file, it is just generated file

geldmacher commented

Thanks a lot for this detailed answer. I will try to dig deeper into it. Perhaps I am able to find a good solution for it. :)

  • 👍1