Generating a cache manifest
===========================

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

.. code-block:: json

 {
   "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 <https://www.npmjs.com/package/webpack-manifest-plugin>`_.
Here's a partial example of what your webpack config might look like using webpack-manifest-plugin.

.. code-block:: js

    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 <https://www.npmjs.com/package/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 <https://github.com/maxdup/flask-static-digest/issues/1>`_