[Webpack 5] PWA manifest.json opnemen in build

[gnoe93]

Ik heb een pwa-manifest.json (https://developer.mozilla.org/en-US/docs/Web/Manifest) die ik zou willen toevoegen aan mijn Webpack config.

Waarom? Omdat het bestand dan een version hash zoals de andere bestanden heeft, en zodat de icons/src properties vervangen worden door de juiste URL (uit de Webpack manifest.json).

Er bestaat hier reeds een plugin voor: https://github.com/arthurbergmz/webpack-pwa-manifest, maar deze werkt niet met Webpack 5, en er zijn nog een aantal andere issues.

Nu vraag ik me af hoe ik dit best zelf zou implementeren. Ik heb in principe enkel de 2 bovenstaande features nodig (versioning + manifest replace). Ik gebruik ook Webpack Encore (Symfony), maar in principe zou dit geen problemen mogen geven bij het toevoegen van custom configuratie.

Ik zat te denken aan iets als volgt:

1. Voordat de Webpack manifest.json weggeschreven wordt, de pwa-manifest.json importeren.
2. De icon srcs te vervangen met een regex (gebruik makende van de Webpack manifest.json).
3. Een gehashte filename genereren van de pwa-manifest.json, en deze toevoegen aan de Webpack manifest.json
4. de gehashte pwa-manifest.json (manueel?) wegschrijven naar de output.

Is dit een gebruiktelijke manier van werken? Hoe zouden jullie dit doen? Ik heb momenteel maar weinig kennis van Webpack, dus het zou leuk zijn moesten jullie me in de juiste richting kunnen sturen .

[R4gnax]

De icon srcs te vervangen met een regex (gebruik makende van de Webpack manifest.json).

Wat dacht je van gewoon de JSON parsen naar object en de properties waarvan je weet dat het URLs horen te zijn, vervolgens met dezelfde logica te behandelen als de file loader ?

Een gehashte filename genereren van de pwa-manifest.json, en deze toevoegen aan de Webpack manifest.json

Het genereren van die output filename; het wegschrijven naar disk; en het onderdeel maken van de Webpack manifest.json als een asset path zijn zaken die Webpack zelf middels de compilation pipeline al regelt; of waar goed ondersteunde Webpack community plugins voor zijn. Dat moet je niet zelf gaan proberen te doen. Enige wat jij hoeft te doen, is jouw transformatie onderdeel maken van een loader; een module rule toevoegen die pwa-manifest.json door deze loader EN de file-loader heen inlaadt; en vervolgens pwa-manifest.json aan je entrypoint toe te voegen.


(Je kunt het fraaier doen met een hele custom plugin; maar dat is ben ik vrij zeker van veel meer moeite dan je waard zou zijn.)

[ Voor 57% gewijzigd door R4gnax op 13-09-2021 19:02 ]

[gnoe93]

Dus je bedoelt een custom loader die de JSON inleest, vervolgens transformeert (de URLs vervangt, en dan terug de JSON serializeert?

In de loader import ik dan gewoonweg de PNGs om de URLs te vervangen?

Ik denk ook niet dat pwa-manifest.json aan mijn entrypoint toevoegen veel zal uitmaken. Ik heb geen HTML waarin pwa-manifest.json geimport wordt, de HTML wordt serverside gegenereerd. Ik denk dus dat Webpack dit bestand gwn zal negeren (tree shaking).