Use WebpackMD5Hash and ChunkManifestPlugin?

[gaearon]

https://github.com/mjackson/web-starter has some interesting config decisions:

• Use of WebpackMD5Hash plugin
• Use of ChunkManifestPlugin plugin

I’d like to understand their point better and whether we should enable them as well.
Thoughts?

[insin]

Relevant webpack issue:

webpack/webpack#1315

Relevant Twitter threads on this implementation:

• https://twitter.com/mjackson/status/755768438811873285 - getting it working
• https://twitter.com/mjackson/status/756181608730800128 - differences between using ChunkManifestPlugin and CommonsChunkPlugin for extracting the manifest (one extracts just the chunk mapping, the other extracts the entire Webpack bootstrap code including the chunk mapping)
• https://twitter.com/jbscript/status/756188291741822976 - why use the WebpackMD5Hash plugin? Examples of build output with and without it. I suspect it's purely coincidence, but it makes [chunkhash] for .js files act like [contenthash] does for extracted CSS files

[gaearon]

OK, this looks reasonable. Would you like to make a PR to get this in?

[mjackson]

I wasn't able to get long-term hashing working correctly w/out using WebpackMD5Hash and ChunkManifestPlugin. The problem was that my hashes kept changing on every single deploy. The reason was that, when you're doing long-term caching, the webpack manifest has a new hash every time. But if that hash is also in your bundle, then the hash of your bundle changes too. It's a circular problem.

The solution is to extract your webpack manifest and stick it in the HTML, which is what ChunkManifestPlugin does. However, you need to be able to control rendering the HTML so you can put the webpack manifest in there.

[ForbesLindesay]

You could also stick the manifest in a separate JavaScript file. You could even then add a hash to the manifest as long as the manifest file itself doesn't get included in the manifest (creating your cycle).

[mjackson]

Yep, you can put it in a separate file. Putting it in the HTML just avoids the extra HTTP request.

[ForbesLindesay]

You could even concatenate it on the start of your existing JS file after the hash is generated (this may have to be done outside of webpack, I don't know much about webpack's features)

[gaearon]

Or we can take control of rendering the HTML.
Maybe HTMLWebpackPlugin already exposes some hooks for that.

[insin]

You can use inline-manifest-webpack-plugin to make an extracted manifest available to inline in a <script> tag in your HtmlWebpackPlugin template.

You can also write another plugin to automatically insert this into the HTML before HtmlWebpackPlugin injects HTML into the template for generated files.

Example in this issue: szrenwei/inline-manifest-webpack-plugin#5

Might just be easier to write your own plugin which does all of that in one place.

[gaearon]

Haha, I was just trying that. After completely reading through webpack/webpack#1315 I can certainly empathize with frustrations around JavaScript tooling.

[gaearon]

OK, now I have a JS object in my HTML. How am I supposed to use this correctly?

I’m trying

    new webpack.optimize.CommonsChunkPlugin({
      names: ['react', 'manifest']
    }),
    new WebpackMd5HashPlugin(),
    new InlineManifestPlugin(),
    function injectManifestIntoHTML() {
      this.plugin('compilation', (compilation) => {
        compilation.plugin('html-webpack-plugin-before-html-processing', (data, cb) => {
          data.html = data.html.replace('</body>', data.assets.webpackManifest + '</body>');
          cb()
        })
      })
    },
    new HtmlWebpackPlugin({
      // ...

right now.

[jfrolich]

It's definitely suboptimal, long term caching seems to be a top priority if you deploy often. Almost lost a day fixing this, found the solution thanks to @mjackson (thanks!).

@gaearon You have to assign it to window.webpackManifest so just add

window.webpackManifest = {...}

[mjackson]

Almost lost a day fixing this

I lost 1.5 days last week ;)