Get the name of all my wepback assets

[oliviertassinari]

I want to save in the cache all my webpack assets during the install event. However, I don't know, in advance, the name of my assets since their names is hashed.

Any idea on how I can get the assets list that will be output by webpack? Maybe the good way to do it is to not use this loader but to write a webpack plugin.

[opatut]

Something like this might work (yes, a webpack plugin) (warning: untested code):

plugins: [
    function writeAssetsJson() {
        this.plugin('done', (stats) => {
            const assets = stats.toJson().assetsByChunkName;
            fs.writeFileSync('path/to/assets.json', JSON.stringify(assets));
        });
    },
]

Then you can simply require("path/to/assets.json"); in the service-worker. However, you will have to first build your assets, then the service worker, since the assets.json will be included in the bundle. I have no idea how to do that on-the-fly with webpack :D

[vyorkin]

btw there is a lot of "webpack-assetts-" plugins out there

[oliviertassinari]

However, you will have to first build your assets

That's my issue.

I have no idea how to do that on-the-fly with webpack :D

https://github.com/NekR/offline-plugin is doing it, but is too invasive. They don't let you write you custom service worker logic. I will probably end up writing a plugin for this.

[oliviertassinari]

I have solved this issue with https://github.com/oliviertassinari/serviceworker-webpack-plugin.