Allow use of contenthash along with templatehash

index.js

@@ -99,6 +99,13 @@ class HtmlWebpackPlugin {
       this.options.filename = path.relative(compiler.options.output.path, filename);
     }
 
+    // `contenthash` is introduced in webpack v4.3
+    // which conflicts with the plugin's existing `contenthash` method,
+    // hence it is renamed to `templatehash` to avoid conflicts
+    this.options.filename = this.options.filename.replace(/\[(?:(\w+):)?contenthash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (match) => {
+      return match.replace('contenthash', 'templatehash');
+    });
+
     // Check if webpack is running in production mode
     // @see https://github.com/webpack/webpack/blob/3366421f1784c449f415cda5930a8e445086f688/lib/WebpackOptionsDefaulter.js#L12-L14
     const isProductionLikeMode = compiler.options.mode === 'production' || !compiler.options.mode;

spec/basic.spec.js

@@ -626,6 +626,38 @@ describe('HtmlWebpackPlugin', () => {
     }, ['<script src="index_bundle.js"'], /test-\S+\.html$/, done);
   });
 
+  it('should allow filename in the format of [<hashType>:contenthash:<digestType>:<length>]', 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.[sha256:contenthash:base32:32].html'})
+      ]
+    }, [], /index\.[a-z0-9]{32}\.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('will replace [templatehash] in the filename with a content hash of 32 hex characters', done => {
     testHtmlPlugin({
       mode: 'production',