CLDR-17270 st: don't use late cache busting for bundle.js

[srl295]

changes us from using index._GITHASH_.js applied by cache busting function, to a statically generated webpack file /cldr-apps/dist/main.71e4a712c8f0e9d8.js (for example)

• instead, let webpack create a bundle name based on the content's hash, which will truly change when and only when the content changes.
• webpack hook to write the file
• read a manifest.json on the server side to serve that

CLDR-17270

• This PR completes the ticket.

Why?

1. it gets us closer to having a static index.html - webpack can create such files. - CLDR-17353
2. the hash only changes if the contents actually change. The hash is based on the contents, so it's appropriate to cache them if they don't change
3. it lets the datadog source maps work properly, because we know ahead of time what the filename is going to be.

ALLOW_MANY_COMMITS=true

[btangmu]

This appears to obviate the need for getCacheBustingExtension as far as js is concerned, which is great. It still leaves getCacheBustingExtension in use for css. I guess webpack still doesn't know about surveytool.css, is that right?

[btangmu]

Reference for "[name]": https://webpack.js.org/guides/output-management/

Reference for "[contenthash]": https://webpack.js.org/guides/caching/

I wish I understood better. Is "[name]" going to get replaced by "index", based on "entry: "./src/index.js"?

[srl295]

It's actually 'main' but it doesnt matter anymore , as I load the pieces dynamically. This would let us re segment the bundle later if desired.

[btangmu]

hmmm... so where would "main" come from in this case, and where's the code change that results in loading pieces dynamically?

[srl295]

Main is the name of the segment in webpack… We could put all of the vendor code, such as vue.js into a separate segments, since it won't change often.

The .js I added writes the segment list to a new manifest.json file and surveytool.Java reads it.

When we have a static index.html then webpack will take care of embedding the bundle automatically.

[srl295]

Actually the docs are here https://webpack.js.org/configuration/output/#template-strings

[btangmu]

that's helpful! also here's a glossary: https://webpack.js.org/glossary/

defines, e.g., "chunk" :-)

[srl295]

This appears to obviate the need for getCacheBustingExtension as far as js is concerned, which is great. It still leaves getCacheBustingExtension in use for css. I guess webpack still doesn't know about surveytool.css, is that right?

I meant to add: we could move surveytool.css into the bundle, but not all routes use the bundle (such as some startup pages). So eventually, yes we put everything into the bundle and the only page we have is index.html

This change is meant to be a little less disruptive, relatively- it doesn't change what is loaded. just how the bundle is loaded.