Improve caching of css on frontend by generating new css when url hashes don't match.
TO DO: add hashchunks to css and js references in index.xhtml files
https://webpack.js.org/guides/caching/
https://medium.com/webpack/predictable-long-term-caching-with-webpack-d3eee1d3fa31
If you can ensure the hashed names/URLs include ".cache.", we've already got a filter to set long cache periods, which will be safe to do if the hash changes whenever the content does.
(We should probably rename that class...)
We can also change the filter rules if there's a different pattern we want to support (perhaps there's a standard webpack convention?).
We are free to name the files however we like - webpack allows filling in placeholders with values such as the entry module name, the hash, and so on.
The CSS is generated by the ExtractText plugin, so these docs may be needed for reference: https://github.com/webpack-contrib/extract-text-webpack-plugin
Note that zanata-frontend/pom.xml will likely need updating to bring in the files regardless of the name. I think it is hard-coded to a static filename right now.
Possible approach:
in zanata-platform/server/zanata-frontend/src/frontend/scripts/build.js:
After the webpack build is finished, we can read the dist directory to find all the actual filenames with hashes in them. The code can find each file by the consistent part before the hash, pull out the hash, and output a .properties file with the file prefix as keys and the hash as values. Update zanata-frontend/pom.xml to include the .properties file in the jar.
Technical notes
See fs.readdirSync for reading the directory
We need to generate a text file which maps say, editor.js to the correct hashed filename for editor.js. Then some Java code can read this and output the correct links in XHTML.
Research links (see webpack-manifest-plugin):