Get list of webpack output files and use in another module for PWA

I'm trying to build a progressive web app, with support for offline usage.

According to MDN, the way to make PWAs work offline is to add the required resources to a cache in the service worker. This requires that the service worker code knows each of the output files. Ideally, this shouldn't be harcoded, and should be generated by webpack, since it knows what files it generates.

I'm struggling to actually generate this list. From my search, there are two plugins that can generate a json file containing a list of the files - webpack-assets-manifest and webpack-manifest-plugin. I can use these in combination with separate targets to generate a manifest with the page files. But I can't import the manifest, since webpack doesn't actually write the manifest until everything is done.

How can I import a list of files that one entry point generates and use them in another entry point/module?

webpack.config.js:

const path = require('path');
const WebpackAssetsManifest = require('webpack-assets-manifest');


const frontend = {
    mode: "development",
    entry: {
        page:"./src/page/page.tsx",
    },
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html?$|\.png$/,
                type: "asset/resource",
                generator: {
                    filename: "[name][ext]",
                },
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.json$/,
                type: "asset/resource",
                exclude: /node_modules/,
            }
        ],
    },
    resolve: {
        extensions: [".html", ".tsx", ".ts", ".js"],
    },
    plugins: [
        new WebpackAssetsManifest({
            output: "page-files.json",
            writeToDisk: true,
        }),
    ]
};

const serviceworker = {
    mode: "development",
    entry: {
        serviceworker: "./src/serviceworker/serviceworker.ts",
    },
    devtool: 'inline-source-map',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    module: {
        rules: [
            {
                test: /\.html?$|\.png$/,
                type: "asset/resource",
                generator: {
                    filename: "[name][ext]",
                },
            },
            {
                test: /\.tsx?$/,
                loader: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.json$/,
                resourceQuery: /link/,
                type: "asset/resource",
                exclude: /node_modules/,
            },
            {
                test: /\.json$/,
                resourceQuery: /str/,
                type: "asset/source",
                exclude: /node_modules/,
            }
        ],
    },
    resolve: {
        extensions: [".html", ".tsx", ".ts", ".js"],
    },
};

module.exports = [frontend, serviceworker];

serviceworker.ts:

import files from "../../dist/page-files.json?str";
console.log(files);

Error is:

Module not found: Error: Can't resolve '../../dist/page-files.json?str' in '<REDACTED>/src/serviceworker'

(When I build it again, it will find the file from the previous build)

from Get list of webpack output files and use in another module for PWA