html-webpack-plugin 5.0.0 → 5.3.1

package/CHANGELOG.md

@@ -2,6 +2,35 @@
 
 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.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)
+
+
+### Features
+
+* improve ssr ([73d2a66](https://github.com/jantimon/html-webpack-plugin/commit/73d2a660b10b9ebf8a341f0ddb173bcaaf1e513c))
+
+## [5.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.0.0...v5.1.0) (2021-02-12)
+
+
+### Features
+
+* omit html tag attribute with null/undefined/false value ([aa6e78d](https://github.com/jantimon/html-webpack-plugin/commit/aa6e78d1430c17d9cf05550b2c9f73a9a0c0166c)), closes [#1598](https://github.com/jantimon/html-webpack-plugin/issues/1598)
+
 ## [5.0.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.1...v5.0.0) (2021-02-03)
 
 

package/README.md

@@ -150,7 +150,7 @@ Allowed values are as follows:
 |**`templateParameters`**|`{Boolean\|Object\|Function}`| `false`| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
 |**`inject`**|`{Boolean\|String}`|`true`|`true \|\| 'head' \|\| 'body' \|\| false` Inject all assets into the given `template` or `templateContent`. When passing `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element. Passing `true` will add it to the head/body depending on the `scriptLoading` option. Passing `false` will disable automatic injections. - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
 |**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
-|**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
+|**`scriptLoading`**|`{'blocking'\|'defer'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
 |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
 |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
 |**`base`**|`{Object\|String\|false}`|`false`|Inject a [`base`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base) tag. E.g. `base: "https://example.com/path/page.html`|
@@ -464,7 +464,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 +476,9 @@ plugins: [
 ]
 ```
 
-`contenthash/templatehash` is the hash of the content of the output file.
+`contenthash` 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
-
-**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');
@@ -123,12 +122,19 @@ class HtmlWebpackPlugin {
       return Promise.reject(new Error('The child compilation didn\'t provide a result'));
     }
     // The LibraryTemplatePlugin stores the template result in a local variable.
-    // To extract the result during the evaluation this part has to be removed.
-    if (source && source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
+    // By adding it to the end the value gets extracted during evaluation
+    if (source.indexOf('HTML_WEBPACK_PLUGIN_RESULT') >= 0) {
       source += ';\nHTML_WEBPACK_PLUGIN_RESULT';
     }
     const templateWithoutLoaders = templateFilename.replace(/^.+!/, '').replace(/\?.+$/, '');
-    const vmContext = vm.createContext({ HTML_WEBPACK_PLUGIN: true, require: require, htmlWebpackPluginPublicPath: publicPath, ...global });
+    const vmContext = vm.createContext({
+      ...global,
+      HTML_WEBPACK_PLUGIN: true,
+      require: require,
+      htmlWebpackPluginPublicPath: publicPath,
+      URL: require('url').URL,
+      __filename: templateWithoutLoaders
+    });
     const vmScript = new vm.Script(source, { filename: templateWithoutLoaders });
     // Evaluate code and cast to string
     let newSource;
@@ -147,7 +153,8 @@ class HtmlWebpackPlugin {
 }
 
 /**
- * apply is called by the webpack main compiler during the start phase
+ * connect the html-webpack-plugin to the webpack compiler lifecycle hooks
+ *
  * @param {import('webpack').Compiler} compiler
  * @param {ProcessedHtmlWebpackOptions} options
  * @param {HtmlWebpackPlugin} plugin
@@ -180,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;
@@ -240,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);
@@ -279,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
               });
             });
@@ -297,7 +288,7 @@ function hookIntoCompiler (compiler, options, plugin) {
                   ...generateFaviconTags(assets.favicon)
                 ]
               },
-              outputName: childCompilationOutputName,
+              outputName: options.filename,
               publicPath: htmlPublicPath,
               plugin: plugin
             }))
@@ -311,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
               });
@@ -342,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 }) => {
@@ -352,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);
             })
@@ -363,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,
@@ -510,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/child-compiler.js

@@ -75,6 +75,7 @@ class HtmlWebpackChildCompiler {
     const webpack = mainCompilation.compiler.webpack;
     const Compilation = webpack.Compilation;
 
+    const NodeTemplatePlugin = webpack.node.NodeTemplatePlugin;
     const NodeTargetPlugin = webpack.node.NodeTargetPlugin;
     const LoaderTargetPlugin = webpack.LoaderTargetPlugin;
     const EntryPlugin = webpack.EntryPlugin;
@@ -103,6 +104,7 @@ class HtmlWebpackChildCompiler {
     const childCompiler = mainCompilation.createChildCompiler(compilerName, outputOptions, [
       // Compile the template to nodejs javascript
       new NodeTargetPlugin(),
+      new NodeTemplatePlugin(),
       new LoaderTargetPlugin('node'),
       new webpack.library.EnableLibraryPlugin('var')
     ]);
@@ -114,10 +116,18 @@ class HtmlWebpackChildCompiler {
 
     // Add all templates
     this.templates.forEach((template, index) => {
-      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
+      new EntryPlugin(childCompiler.context, 'data:text/javascript,__webpack_public_path__ = __webpack_base_uri__ = htmlWebpackPluginPublicPath;', `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
       new EntryPlugin(childCompiler.context, template, `HtmlWebpackPlugin_${index}-${this.id}`).apply(childCompiler);
     });
 
+    // The templates are compiled and executed by NodeJS - similar to server side rendering
+    // Unfortunately this causes issues as some loaders require an absolute URL to support ES Modules
+    // The following config enables relative URL support for the child compiler
+    childCompiler.options.module = { ...childCompiler.options.module };
+    childCompiler.options.module.parser = { ...childCompiler.options.module.parser };
+    childCompiler.options.module.parser.javascript = { ...childCompiler.options.module.parser.javascript,
+      url: 'relative' };
+
     this.compilationStartedTimestamp = new Date().getTime();
     this.compilationPromise = new Promise((resolve, reject) => {
       const extractedAssets = [];

package/lib/html-tags.js

@@ -25,12 +25,12 @@ const voidTags = ['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'k
  *  A tag element according to the htmlWebpackPlugin object notation
  *
  * @param xhtml {boolean}
- *   Wether the generated html should add closing slashes to be xhtml compliant
+ *   Whether the generated html should add closing slashes to be xhtml compliant
  */
 function htmlTagObjectToString (tagDefinition, xhtml) {
   const attributes = Object.keys(tagDefinition.attributes || {})
     .filter(function (attributeName) {
-      return tagDefinition.attributes[attributeName] !== false;
+      return tagDefinition.attributes[attributeName] === '' || tagDefinition.attributes[attributeName];
     })
     .map(function (attributeName) {
       if (tagDefinition.attributes[attributeName] === true) {
@@ -49,13 +49,13 @@ function htmlTagObjectToString (tagDefinition, xhtml) {
  * @param {string} tagName
  * the name of the tag e.g. 'div'
  *
- * @param {{[attributeName: string]: string|boolean}} [attributes]
+ * @param {{[attributeName: string]: string|boolean|null|undefined}} [attributes]
  * tag attributes e.g. `{ 'class': 'example', disabled: true }`
  *
  * @param {string} [innerHTML]
  *
- * @param {{[attributeName: string]: string|boolean}} [meta]
- * meta information about the tag e.g. `{ 'pluhin': 'html-webpack-plugin' }`
+ * @param {{[attributeName: string]: string|boolean|null|undefined}} [meta]
+ * meta information about the tag e.g. `{ 'plugin': 'html-webpack-plugin' }`
  *
  * @returns {HtmlTagObject}
  */

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.0.0",
+  "version": "5.3.1",
   "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,17 +28,15 @@
     ]
   },
   "devDependencies": {
-    "@types/loader-utils": "2.0.1",
     "@types/node": "11.13.9",
     "commitizen": "4.2.1",
     "css-loader": "5.0.1",
     "cz-conventional-changelog": "2.1.0",
     "dir-compare": "1.7.2",
-    "file-loader": "6.2.0",
-    "html-loader": "1.3.2",
+    "html-loader": "2.1.1",
     "jest": "26.5.3",
     "mini-css-extract-plugin": "1.0.0",
-    "pug": "2.0.3",
+    "pug": "3.0.2",
     "pug-loader": "2.4.0",
     "raw-loader": "4.0.2",
     "rimraf": "2.6.3",
@@ -46,14 +44,13 @@
     "standard-version": "9.1.0",
     "style-loader": "2.0.0",
     "typescript": "4.1.3",
-    "webpack": "^5.20.0",
+    "webpack": "5.24.3",
     "webpack-recompilation-simulator": "3.2.0",
-    "webpack-cli": "4.2.0"
+    "webpack-cli": "4.5.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",
     "tapable": "^2.0.0"

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";
     /**
@@ -263,7 +263,7 @@ declare namespace HtmlWebpackPlugin {
      * E.g. `{'disabled': true, 'value': 'demo'}`
      */
     attributes: {
-      [attributeName: string]: string | boolean;
+      [attributeName: string]: string | boolean | null | undefined;
     };
     /**
      * The tag name e.g. `'div'`