Add example

[diurnalist]

Add an example that shows why this plugin is helpful, and how it is used.

[okonet]

:+1: Please! This would be really helpful!

[deepsweet]

I can't get it work, chunks IDs in manifest.json changes on every build. or I don't understand the idea :)

[kentcdodds]

Could definitely use an example. I get what this line means:

Webpack can then read this mapping, assuming it is provided somehow on the client

But I'm not sure how to provide the mapping to webpack...

[deepsweet]

have found this:

You may remember from before that webpack creates an ID for each bundle, to minimise the size of all its files. So, every compiled bundle webpack produces will internally have an ID. By default, webpack will store these IDs in the common bundle. The problem with this is that whenever you change any bundle, it’ll mean the common bundle will be updated (to include the new common manifest), thus cache-busting it needlessly.

Thanks to the ChunkManifestPlugin, webpack can be told to not write this manifest directly into the common bundle. Instead it writes the manifest out and then, when it runs in the browser, will look for a global variable webpackBundleManifest

and then:

<script>
//<![CDATA[
window.webpackManifest = {"0":"0-bundle-bdbd995368b007bb18a7.js","2":"2-bundle-7ad34cf6445d875d8506.js","3":"3-bundle-f8745c8bc2319252b6de.js","4":"4-bundle-ec8f5ae62f2e8da11aa1.js","5":"authenticated-bundle-933816ada9534488d12f.js","6":"public-bundle-8eb73d97201bd2e4951b.js"}
//]]>
</script>
<script src="https://abc.cloudfront.net/assets/common-71a050793d79ce393b1e.js"></script>
<script src="https://abc.cloudfront.net/assets/public-bundle-8eb73d97201bd2e4951b.js"></script>

as far as I understand it webpack will try to find IDs map in window.webpackManifest instead of storing it in common chunk.

[diurnalist]

@deepsweet @kentcdodds yes, you just assign that manifest JSON to a global variable, presumably as some sort of <script> tag in your HTML response.

Thanks for the link to the post! Does a better job of explaining.

[okonet]

I've written an article on how to set it up. Would be happy for any feedback: https://medium.com/@okonetchnikov/long-term-caching-of-static-assets-with-webpack-1ecb139adb95

@deepsweet your issue is also mentioned in the article. You should use OccurenceOrderPlugin to fix this.

I've also added a repository with a sample webpack.config: https://github.com/okonet/webpack-long-term-cache-demo

[chrisabrams]

Thanks a lot for this!

[ibufu]

Is there a plugin can help us inject webpackManifest to html automatically?

[okonet]

@ibufu https://github.com/szrenwei/inline-manifest-webpack-plugin

[feus4177]

@ibufu if you're talking about injecting window.webpackManifest = {...}, I found https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin to be useful. I realize this is a little late but hopefully others who come after me will find it useful.

[jouni-kantola]

I've published inline-chunk-manifest-html-webpack-plugin to npm. https://www.npmjs.com/package/inline-chunk-manifest-html-webpack-plugin