html-webpack-plugin 5.2.0 → 5.4.0

package/CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [5.4.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.3.2...v5.3.3) (2021-10-15)
+
+### Features
+
+* update terser ([9c7fba0](https://github.com/jantimon/html-webpack-plugin/pull/1688)
+
+### [5.3.2](https://github.com/jantimon/html-webpack-plugin/compare/v5.3.1...v5.3.2) (2021-06-22)
+
+### Bug Fixes
+
+* update lodash and pretty error ([9c7fba0](https://github.com/jantimon/html-webpack-plugin/commit/9c7fba02d0aa7d9e804863a66eb896db3046f645)
+
+### [5.3.1](https://github.com/jantimon/html-webpack-plugin/compare/v5.3.0...v5.3.1) (2021-03-09)
+
+
+### Bug Fixes
+
+* remove loader-utils from plugin core ([82d0ee8](https://github.com/jantimon/html-webpack-plugin/commit/82d0ee8ddf146f17d71e98c1b44b2f2ec7420051))
+
+## [5.3.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.2.0...v5.3.0) (2021-03-07)
+
+
+### Features
+
+* allow to modify the interpolation options in webpack config ([d654f5b](https://github.com/jantimon/html-webpack-plugin/commit/d654f5b90022304335b372d424ff4c08d3a9d341))
+* drop loader-utils dependency ([41d7a50](https://github.com/jantimon/html-webpack-plugin/commit/41d7a50516aefd1af2704e3837d5d41351c6199b))
+
 ## [5.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.1.0...v5.2.0) (2021-02-19)
 
 

package/README.md

@@ -79,7 +79,6 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [html-webpack-include-assets-plugin](https://github.com/jharris4/html-webpack-include-assets-plugin) for including lists of js or css file paths (such as those copied by the copy-webpack-plugin).
  * [html-webpack-injector](https://github.com/thearchitgarg/html-webpack-injector) to inject chunks in `head` or `body` (different locations ) of same html document.
  * [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin) to add resource hints for faster initial page loads using `<link rel='preload'>` and `<link rel='prefetch'>`
- * [preload-webpack-plugin](https://github.com/GoogleChrome/preload-webpack-plugin) for automatically wiring up asynchronous (and other types) of JavaScript chunks using `<link rel='preload'>` helping with lazy-loading
  * [link-media-html-webpack-plugin](https://github.com/yaycmyk/link-media-html-webpack-plugin) allows for injected stylesheet `<link />` tags to have their media attribute set automatically; useful for providing specific desktop/mobile/print etc. stylesheets that the browser will conditionally download
  * [html-webpack-inline-style-plugin](https://github.com/djaax/html-webpack-inline-style-plugin) for inlining styles to HTML elements using [juice](https://github.com/Automattic/juice). Useful for email generation automatisation.
  * [html-webpack-exclude-empty-assets-plugin](https://github.com/KnisterPeter/html-webpack-exclude-empty-assets-plugin) removes empty assets from being added to the html. This fixes some problems with extract-text-plugin with webpack 4.
@@ -89,13 +88,13 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [webpack-nomodule-plugin](https://github.com/swimmadude66/webpack-nomodule-plugin) allows you to add a `nomodule` attribute to specific injected scripts, which prevents the scripts from being loaded by newer browsers. Good for limiting loads of polyfills.
   * [html-webpack-skip-assets-plugin](https://github.com/swimmadude66/html-webpack-skip-assets-plugin) Skip adding certain output files to the html file. Built as a drop-in replacement for [html-webpack-exclude-assets-plugin](https://www.npmjs.com/package/html-webpack-exclude-assets-plugin) and works with newer [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) versions
  * [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) allows to add preload links &lt;link rel='preload'> anywhere you want.
-
+ * [inject-body-webpack-plugin](https://github.com/Jaid/inject-body-webpack-plugin) is a simple method of injecting a custom HTML string into the body.
 
 
 <h2 align="center">Usage</h2>
 
 The plugin will generate an HTML5 file for you that includes all your `webpack`
-bundles in the body using `script` tags. Just add the plugin to your `webpack`
+bundles in the head using `script` tags. Just add the plugin to your `webpack`
 config as follows:
 
 **webpack.config.js**
@@ -122,9 +121,9 @@ This will generate a file `dist/index.html` containing the following
   <head>
     <meta charset="utf-8">
     <title>Webpack App</title>
+    <script defer src="index_bundle.js"></script>
   </head>
   <body>
-    <script src="index_bundle.js"></script>
   </body>
 </html>
 ```
@@ -464,7 +463,7 @@ which will inject the element `<base href="http://example.com/some/page.html" ta
 
 ### Long Term Caching
 
-For long term caching add `contenthash/templatehash` to the filename.
+For long term caching add `contenthash` to the filename.
 
 **Example:**
 
@@ -476,15 +475,9 @@ plugins: [
 ]
 ```
 
-`contenthash/templatehash` is the hash of the content of the output file.
-
-Optionally, You can configure like `[<hashType>:contenthash:<digestType>:<length>]`
-
-* `hashType` - one of `sha1`, `md5`, `sha256`, `sha512`  or any other node.js supported hash type
-* `digestType` - one of `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
-* `maxlength` - maximum length of the generated hash in chars
+`contenthash` is the hash of the content of the output file.
 
-**Defaults:** `[md5:contenthash:hex:9999]`
+Refer webpack's [Template Strings](https://webpack.js.org/configuration/output/#template-strings) for more details
 
 ### Events
 

package/index.js

@@ -14,7 +14,6 @@ const vm = require('vm');
 const fs = require('fs');
 const _ = require('lodash');
 const path = require('path');
-const loaderUtils = require('loader-utils');
 const { CachedChildCompilation } = require('./lib/cached-child-compiler');
 
 const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags');
@@ -132,8 +131,7 @@ class HtmlWebpackPlugin {
       ...global,
       HTML_WEBPACK_PLUGIN: true,
       require: require,
-      htmlWebpackPluginPublicPath:
-      publicPath,
+      htmlWebpackPluginPublicPath: publicPath,
       URL: require('url').URL,
       __filename: templateWithoutLoaders
     });
@@ -189,13 +187,6 @@ function hookIntoCompiler (compiler, options, plugin) {
     options.filename = path.relative(outputPath, 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
-  options.filename = 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;
@@ -249,21 +240,12 @@ function hookIntoCompiler (compiler, options, plugin) {
             compilation.errors.push(prettyError(templateResult.error, compiler.context).toString());
           }
 
-          const compiledEntries = 'compiledEntry' in templateResult ? {
-            hash: templateResult.compiledEntry.hash,
-            chunk: templateResult.compiledEntry.entry
-          } : {
-            hash: templateResult.mainCompilationHash
-          };
-
-          const childCompilationOutputName = compilation.getAssetPath(options.filename, compiledEntries);
-
           // If the child compilation was not executed during a previous main compile run
           // it is a cached result
           const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
 
           /** The public path used inside the html file */
-          const htmlPublicPath = getPublicPath(compilation, childCompilationOutputName, options.publicPath);
+          const htmlPublicPath = getPublicPath(compilation, options.filename, options.publicPath);
 
           /** Generated file paths from the entry point names */
           const assets = htmlWebpackPluginAssets(compilation, sortedEntryNames, htmlPublicPath);
@@ -288,7 +270,7 @@ function hookIntoCompiler (compiler, options, plugin) {
               assets.favicon = faviconPath;
               return getHtmlWebpackPluginHooks(compilation).beforeAssetTagGeneration.promise({
                 assets: assets,
-                outputName: childCompilationOutputName,
+                outputName: options.filename,
                 plugin: plugin
               });
             });
@@ -306,7 +288,7 @@ function hookIntoCompiler (compiler, options, plugin) {
                   ...generateFaviconTags(assets.favicon)
                 ]
               },
-              outputName: childCompilationOutputName,
+              outputName: options.filename,
               publicPath: htmlPublicPath,
               plugin: plugin
             }))
@@ -320,7 +302,7 @@ function hookIntoCompiler (compiler, options, plugin) {
               return getHtmlWebpackPluginHooks(compilation).alterAssetTagGroups.promise({
                 headTags: assetGroups.headTags,
                 bodyTags: assetGroups.bodyTags,
-                outputName: childCompilationOutputName,
+                outputName: options.filename,
                 publicPath: htmlPublicPath,
                 plugin: plugin
               });
@@ -351,7 +333,7 @@ function hookIntoCompiler (compiler, options, plugin) {
           const injectedHtmlPromise = Promise.all([assetTagGroupsPromise, templateExectutionPromise])
           // Allow plugins to change the html before assets are injected
             .then(([assetTags, html]) => {
-              const pluginArgs = { html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: plugin, outputName: childCompilationOutputName };
+              const pluginArgs = { html, headTags: assetTags.headTags, bodyTags: assetTags.bodyTags, plugin: plugin, outputName: options.filename };
               return getHtmlWebpackPluginHooks(compilation).afterTemplateExecution.promise(pluginArgs);
             })
             .then(({ html, headTags, bodyTags }) => {
@@ -361,7 +343,7 @@ function hookIntoCompiler (compiler, options, plugin) {
           const emitHtmlPromise = injectedHtmlPromise
           // Allow plugins to change the html after assets are injected
             .then((html) => {
-              const pluginArgs = { html, plugin: plugin, outputName: childCompilationOutputName };
+              const pluginArgs = { html, plugin: plugin, outputName: options.filename };
               return getHtmlWebpackPluginHooks(compilation).beforeEmit.promise(pluginArgs)
                 .then(result => result.html);
             })
@@ -372,16 +354,15 @@ function hookIntoCompiler (compiler, options, plugin) {
               return options.showErrors ? prettyError(err, compiler.context).toHtml() : 'ERROR';
             })
             .then(html => {
-              // Allow to use [templatehash] as placeholder for the html-webpack-plugin name
-              // See also https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/
-              // From https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/8de6558e33487e7606e7cd7cb2adc2cccafef272/src/index.js#L212-L214
-              const finalOutputName = childCompilationOutputName.replace(/\[(?:(\w+):)?templatehash(?::([a-z]+\d*))?(?::(\d+))?\]/ig, (_, hashType, digestType, maxLength) => {
-                return loaderUtils.getHashDigest(Buffer.from(html, 'utf8'), hashType, digestType, parseInt(maxLength, 10));
-              });
+              const filename = options.filename.replace(/\[templatehash([^\]]*)\]/g, require('util').deprecate(
+                (match, options) => `[contenthash${options}]`,
+                '[templatehash] is now [contenthash]')
+              );
+              const replacedFilename = replacePlaceholdersInFilename(filename, html, compilation);
               // Add the evaluated html code to the webpack assets
-              compilation.emitAsset(finalOutputName, new webpack.sources.RawSource(html, false));
-              previousEmittedAssets.push({ name: finalOutputName, html });
-              return finalOutputName;
+              compilation.emitAsset(replacedFilename.path, new webpack.sources.RawSource(html, false), replacedFilename.info);
+              previousEmittedAssets.push({ name: replacedFilename.path, html });
+              return replacedFilename.path;
             })
             .then((finalOutputName) => getHtmlWebpackPluginHooks(compilation).afterEmit.promise({
               outputName: finalOutputName,
@@ -519,6 +500,38 @@ function hookIntoCompiler (compiler, options, plugin) {
       });
   }
 
+  /**
+   * Replace [contenthash] in filename
+   *
+   * @see https://survivejs.com/webpack/optimizing/adding-hashes-to-filenames/
+   *
+   * @param {string} filename
+   * @param {string|Buffer} fileContent
+   * @param {WebpackCompilation} compilation
+   * @returns {{ path: string, info: {} }}
+   */
+  function replacePlaceholdersInFilename (filename, fileContent, compilation) {
+    if (/\[\\*([\w:]+)\\*\]/i.test(filename) === false) {
+      return { path: filename, info: {} };
+    }
+    const hash = compiler.webpack.util.createHash(compilation.outputOptions.hashFunction);
+    hash.update(fileContent);
+    if (compilation.outputOptions.hashSalt) {
+      hash.update(compilation.outputOptions.hashSalt);
+    }
+    const contentHash = hash.digest(compilation.outputOptions.hashDigest).slice(0, compilation.outputOptions.hashDigestLength);
+    return compilation.getPathWithInfo(
+      filename,
+      {
+        contentHash,
+        chunk: {
+          hash: contentHash,
+          contentHash
+        }
+      }
+    );
+  }
+
   /**
    * Helper to sort chunks
    * @param {string[]} entryNames

package/lib/loader.js

@@ -2,20 +2,26 @@
 // @ts-nocheck
 'use strict';
 const _ = require('lodash');
-const loaderUtils = require('loader-utils');
 
 module.exports = function (source) {
   // Get templating options
-  const options = this.query !== '' ? loaderUtils.getOptions(this) : {};
+  const options = this.getOptions();
   const force = options.force || false;
 
-  const allLoadersButThisOne = this.loaders.filter(function (loader) {
-    return loader.normal !== module.exports;
-  });
+  const allLoadersButThisOne = this.loaders.filter((loader) => loader.normal !== module.exports);
+
   // This loader shouldn't kick in if there is any other loader (unless it's explicitly enforced)
   if (allLoadersButThisOne.length > 0 && !force) {
     return source;
   }
+
+  // Allow only one html-webpack-plugin loader to allow loader options in the webpack config
+  const htmlWebpackPluginLoaders = this.loaders.filter((loader) => loader.normal === module.exports);
+  const lastHtmlWebpackPluginLoader = htmlWebpackPluginLoaders[htmlWebpackPluginLoaders.length - 1];
+  if (this.loaders[this.loaderIndex] !== lastHtmlWebpackPluginLoader) {
+    return source;
+  }
+
   // Skip .js files (unless it's explicitly enforced)
   if (/\.js$/.test(this.resourcePath) && !force) {
     return source;
@@ -23,7 +29,7 @@ module.exports = function (source) {
 
   // The following part renders the template with lodash as a minimalistic loader
   //
-  const template = _.template(source, _.defaults(options, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data' }));
+  const template = _.template(source, { interpolate: /<%=([\s\S]+?)%>/g, variable: 'data', ...options });
   // Use __non_webpack_require__ to enforce using the native nodejs require
   // during template execution
   return 'var _ = __non_webpack_require__(' + JSON.stringify(require.resolve('lodash')) + ');' +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "license": "MIT",
   "description": "Simplifies creation of HTML files to serve your webpack bundles",
   "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -28,33 +28,31 @@
     ]
   },
   "devDependencies": {
-    "@types/loader-utils": "2.0.1",
     "@types/node": "11.13.9",
-    "commitizen": "4.2.1",
+    "commitizen": "^4.2.4",
     "css-loader": "5.0.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "1.7.2",
-    "html-loader": "2.0.0",
+    "html-loader": "2.1.1",
     "jest": "26.5.3",
-    "mini-css-extract-plugin": "1.0.0",
-    "pug": "2.0.3",
+    "mini-css-extract-plugin": "^1.6.0",
+    "pug": "3.0.2",
     "pug-loader": "2.4.0",
     "raw-loader": "4.0.2",
     "rimraf": "2.6.3",
     "semistandard": "^13.0.1",
-    "standard-version": "9.1.0",
+    "standard-version": "^9.3.0",
     "style-loader": "2.0.0",
     "typescript": "4.1.3",
-    "webpack": "5.23.0",
-    "webpack-recompilation-simulator": "3.2.0",
-    "webpack-cli": "4.2.0"
+    "webpack": "5.24.3",
+    "webpack-cli": "4.5.0",
+    "webpack-recompilation-simulator": "3.2.0"
   },
   "dependencies": {
-    "@types/html-minifier-terser": "^5.0.0",
-    "html-minifier-terser": "^5.0.1",
-    "loader-utils": "^2.0.0",
-    "lodash": "^4.17.20",
-    "pretty-error": "^2.1.1",
+    "@types/html-minifier-terser": "^6.0.0",
+    "html-minifier-terser": "^6.0.2",
+    "lodash": "^4.17.21",
+    "pretty-error": "^3.0.4",
     "tapable": "^2.0.0"
   },
   "peerDependencies": {

package/typings.d.ts

@@ -94,7 +94,7 @@ declare namespace HtmlWebpackPlugin {
      * blocking will result in <script src="..."></script>
      * defer will result in <script defer src="..."></script>
      *
-     * @default 'blocking'
+     * @default 'defer'
      */
     scriptLoading?: "blocking" | "defer";
     /**