What hooks do I have to use to create a PWA plugin?

[GabenGar]

Basically I need to create a PWA manifest as a part of the build.
I surmised since it doesn't involve taking actual input files to transform, but has to output one or more .json files, it has to be a plugin and not a loader.
A lot of fields in the manifest are just strings, so those can be passed through options, but certain fields, like icons and screenshots describe assets and therefore can be sent through the build pipeline, resulting in a .json file, the path to which should be accessible in the code (to put its path into <link> element at least).
It will also have to implicitly prefix fields like scope and shortcuts with publicPath.
Suppose majority of the of the fields do not depend on any compilation state, so they can be created at the top level of apply() method. But what about icons? Presume the options will provide a source icon file path, which is most likely going to be used in the main codebase and the final processed path added to the manifest. Same logic with scope. But then I'll have to create the manifest file as an assets and somehow get those final paths in its hook callback.
There are quadrillion hooks listed in the docs and I have no idea where to even start and the writing plugin page has a strong "How To Draw an Owl" vibe.

[alexander-akait]

When you want to emit assets you have to use compilation.hooks.processAssets, there is simple manifest plugin - https://github.com/webpack/webpack/blob/main/lib/ManifestPlugin.js#L72 (it is just an example to see how to write them), the main thing is stage here.

For example if you want to generate icons and manifest file you can register two hooks with different stage:

• icon hook will have the PROCESS_ASSETS_STAGE_ADDITIONAL stage - https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L5744C13-L5744C44 ) there you will generate images (maybe more)
• manifest hook will have PROCESS_ASSETS_STAGE_SUMMARIZE stage

You can find more them here - https://github.com/webpack/webpack/blob/main/lib/Compilation.js#L5744, their names describe when they are best used.

[GabenGar]

How do I get the path to the final manifest file to use in the code? The code in question is NextJS, so I'd have to write server-rendered base in JSX. I assume I'll have to create a magical string denoting the final path to the file which webpack will replace during the build process, or something along these lines.

[alexander-akait]

Sorry, I don't understand you, you can store the filename in any place

[GabenGar]

I provide the path to the source manifest file in the plugin, but the markup will have to refer to the output name, like this:

<link rel="manifest" href="{path_to_manifest}" />

With standard SPA setup I'd probably hack something up with templates of HTMLWebpackPlugin, but NextJS uses custom logic for server rendering and I'd rather not dive into it. Is it possible to create and env variable of sort which would mean "the path to output manifest file" and then just insert it into jsx markup?