Generating a cache manifest

..code:cache_manifest.json: files are filename mappings which are generally defined as such:

{
  "app.css": "app.298c725b7e42a4c6419f.css",
  "app.js": "app-afc95bdb227d3f19d501.js"
}

These can usually be generated by your favorite bundler. Instructions will vary depending on your tool of choice.

Webpack 5

Webpack can generate cache manifests using the webpack-manifest-plugin. Here's a partial example of what your webpack config might look like using webpack-manifest-plugin.

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

config = {
    ...
    output: {
        publicPath: '', // This is important, otherwise Webpack 5 defaults to 'auto'
        filename: "[name]-[contenthash].js",
    },
    plugins: [
        new WebpackManifestPlugin({
            fileName: "cache_manifest.json"
        }),
    ]
}

Bonus

Flask-cache-manifest has your webpack assets covered in prod but what about your dev environment? We recommend that you look into webpack-livereload-plugin.

Other Bundlers

Feel free to come discuss other bundlers if you wish to help improve the documentation for your tools. Github discussion