assets generated from the child compiler whose key has hash in the manifest.json

[wood1986]

Currently, the webpack-manifest-plugin does not support extracting the asset chunk name from the child compiler.

Here is part of my webpack.config.js

{
  ...
  "plugins": [
      new HtmlWebpackPlugin({
        "filename": "index.[chunkhash].html",
        "template": path.resolve(__dirname, "index.ejs")
      }),
      new ManifestPlugin()
  ],
  ...
}

And here is the actual output

{
  "index.js": "index.development.a26310385714a01e48eb.js",
  "vendors.js": "vendors.development.b4273a31cc345f8df775.js",
  "index.c5a9bff71fdfed9b6046.html": "index.c5a9bff71fdfed9b6046.html"
}

The expected output

{
  "index.js": "index.development.a26310385714a01e48eb.js",
  "vendors.js": "vendors.development.b4273a31cc345f8df775.js",
  "index.html": "index.c5a9bff71fdfed9b6046.html"
}

In this output, how to we know the filename after the build without a stable key name.

And you will say that this is the issue on html-webpack-plugin. You are partially correct. Basically there are two issues right here. One is on html-webpack-plugin because it does not name the chunk. The other one is on webpack-manifest-plugin. Even if html-webpack-plugin name the chunk correctly, webpack-manifest-plugin won't be able to extract the chunk name as the key in the manifest.json

Because the key, index.c5a9bff71fdfed9b6046.html, was extracted from this logic https://github.com/danethurber/webpack-manifest-plugin/blob/b55ac5d7748dde89fd0225e13263c7b42b1dca87/lib/plugin.js#L115-L141. Child compiler can have the entry name. I think webpack-manifest-plugin should respect that if the chunks in child compiler have name.

The correct logic should recursively extract all the chunks from parent compilation to all children compilation

The following logic should be called recursively https://github.com/danethurber/webpack-manifest-plugin/blob/b55ac5d7748dde89fd0225e13263c7b42b1dca87/lib/plugin.js#L87-L111

Please do not judge if the index.[contenthash].html makes sense. worker-loader is also a good counter example.

[rendom]

Experiencing the same problem with copy-webpack-plugin

[wood1986]

Any updates??. As html-webpack-plugin v4 support index.[contenthash].html, See Long Term Caching

[peschee]

I have implemented a workaround for copy-webpack-plugin until this issue is fixed. Here's a short example of a webpack.config.js

const merge = require('merge-deep');

module.exports = {
  plugins: [
    new ManifestPlugin({
      map: (fileDescriptor) => {
        const { name } = fileDescriptor;

        // Removes the ".[contenthash]" part from name
        return merge(fileDescriptor, { name: name.replace(/(\.[a-f0-9]+)(\.[a-z]{2,})$/, '$2') });
      },
    }),
    new CopyPlugin({
      patterns: [{ from: 'src/img/**/*', to: 'img/[name].[contenthash].[ext]' }],
    }),
  ],
}

[shellscape]

@peschee thanks for adding that workaround. For v3.0.0 we'll implement that fix behind an option that's default to true.