npm - html-webpack-plugin - Versions diffs - 5.1.0 → 5.3.2 - Mend

html-webpack-plugin 5.1.0 → 5.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,34 @@
 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.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)
+### 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)

package/README.md CHANGED Viewed

@@ -89,13 +89,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 +122,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 +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.
-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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/loader.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.1.0",
+  "version": "5.3.2",
   "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,34 +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",
-    "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",
+    "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.20.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",
+    "lodash": "^4.17.21",
+    "pretty-error": "^3.0.4",
     "tapable": "^2.0.0"
   },
   "peerDependencies": {

package/typings.d.ts CHANGED Viewed

@@ -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";
     /**