html-webpack-plugin 5.3.0 → 5.5.0

package/CHANGELOG.md

@@ -2,6 +2,32 @@
 
 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.5.0](https://github.com/jantimon/html-webpack-plugin/compare/v5.4.0...v5.5.0) (2021-10-25)
+
+
+### Features
+
+* Support type=module via scriptLoading option ([1e42625](https://github.com/jantimon/html-webpack-plugin/commit/1e4262528ff02a83e1fc7739b42472680fd205c2)), closes [#1663](https://github.com/jantimon/html-webpack-plugin/issues/1663)
+
+### [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)
 
 

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>
 ```
@@ -150,7 +149,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'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
+|**`scriptLoading`**|`{'blocking'\|'defer'\|'module'}`|`'defer'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. Setting to `'module'` adds attribute [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). This also implies "defer", since modules are automatically deferred. |
 |**`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 +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');
@@ -71,7 +70,7 @@ class HtmlWebpackPlugin {
       this.options = options;
 
       // Assert correct option spelling
-      assert(options.scriptLoading === 'defer' || options.scriptLoading === 'blocking', 'scriptLoading needs to be set to "defer" or "blocking');
+      assert(options.scriptLoading === 'defer' || options.scriptLoading === 'blocking' || options.scriptLoading === 'module', 'scriptLoading needs to be set to "defer", "blocking" or "module"');
       assert(options.inject === true || options.inject === false || options.inject === 'head' || options.inject === 'body', 'inject needs to be set to true, false, "head" or "body');
 
       // Default metaOptions if no template is provided
@@ -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
@@ -728,7 +741,8 @@ function hookIntoCompiler (compiler, options, plugin) {
       voidTag: false,
       meta: { plugin: 'html-webpack-plugin' },
       attributes: {
-        defer: options.scriptLoading !== 'blocking',
+        defer: options.scriptLoading === 'defer',
+        type: options.scriptLoading === 'module' ? 'module' : undefined,
         src: scriptAsset
       }
     }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.3.0",
+  "version": "5.5.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,32 +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",
+    "dir-compare": "^3.3.0",
     "html-loader": "2.1.1",
-    "jest": "26.5.3",
-    "mini-css-extract-plugin": "1.0.0",
+    "jest": "^27.2.5",
+    "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",
-    "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": "^4.0.0",
     "tapable": "^2.0.0"
   },
   "peerDependencies": {

package/typings.d.ts

@@ -96,7 +96,7 @@ declare namespace HtmlWebpackPlugin {
      *
      * @default 'defer'
      */
-    scriptLoading?: "blocking" | "defer";
+    scriptLoading?: "blocking" | "defer" | "module";
     /**
      * Inject meta tags
      */