feat: Add support for the [contenthash] placeholder inside htm file names

Author: jantimon

index.js

@@ -14,6 +14,7 @@ const vm = require('vm');
 const fs = require('fs');
 const _ = require('lodash');
 const path = require('path');
+const loaderUtils = require('loader-utils');
 
 const htmlTagObjectToString = require('./lib/html-tags').htmlTagObjectToString;
 
@@ -238,15 +239,21 @@ class HtmlWebpackPlugin {
             return self.options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR';
           })
           .then(html => {
+            // Allow to use [contenthash] as placeholder for the html-webpack-plugin name
+            // From https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/8de6558e33487e7606e7cd7cb2adc2cccafef272/src/index.js#L212-L214
+            const finalOutputName = self.childCompilationOutputName.replace(/\[(?:(\w+):)?contenthash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, function () {
+              return loaderUtils.getHashDigest(html, arguments[1], arguments[2], parseInt(arguments[3], 10));
+            });
             // Replace the compilation result with the evaluated html code
-            compilation.assets[self.childCompilationOutputName] = {
+            compilation.assets[finalOutputName] = {
               source: () => html,
               size: () => html.length
             };
+            return finalOutputName;
           })
-          .then(() => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
+          .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
             html: compilation.assets[self.childCompilationOutputName],
-            outputName: self.childCompilationOutputName,
+            outputName: finalOutputName,
             plugin: self
           }).catch(err => {
             console.error(err);

spec/basic.spec.js

@@ -50,8 +50,9 @@ function testHtmlPlugin (webpackConfig, expectedResults, outputFile, done, expec
       expect(compilationWarnings).toBe('');
     }
     if (outputFile instanceof RegExp) {
+      const fileNames = Object.keys(stats.compilation.assets);
       const matches = Object.keys(stats.compilation.assets).filter(item => outputFile.test(item));
-      expect(matches.length).toBe(1);
+      expect(matches[0] || fileNames).not.toEqual(fileNames);
       outputFile = matches[0];
     }
     expect(outputFile.indexOf('[hash]') === -1).toBe(true);
@@ -629,6 +630,22 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<script src="index_bundle.js"'], /test-\S+\.html$/, done);
   });
 
+  it('will replace [contenthash] in the filename with a content hash of 32 hex characters', done => {
+    testHtmlPlugin({
+      mode: 'production',
+      entry: {
+        index: path.join(__dirname, 'fixtures/index.js')
+      },
+      output: {
+        path: OUTPUT_DIR,
+        filename: '[name]_bundle.js'
+      },
+      plugins: [
+        new HtmlWebpackPlugin({filename: 'index.[contenthash].html'})
+      ]
+    }, [], /index\.[a-f0-9]{32}\.html/, done);
+  });
+
   it('allows you to use an absolute output filename', done => {
     testHtmlPlugin({
       mode: 'production',
@@ -1264,7 +1281,6 @@ describe('HtmlWebpackPlugin', () => {
     }, false,
     shouldExpectWarnings);
   });
-
   it('works with commons chunk plugin', done => {
     testHtmlPlugin({
       mode: 'production',