npm - html-webpack-plugin - Versions diffs - 5.0.0-beta.5 → 5.2.0 - Mend

html-webpack-plugin 5.0.0-beta.5 → 5.2.0

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 (8) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,55 @@
 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.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)
+### ⚠ BREAKING CHANGES
+* Drop support for `webpack` 4 and `node` <= 10 - For older webpack or node versions please use `html-webpack-plugin` 4.x
+* Entry javascript resources are now beeing loaded deferred in the `<head>` tag to improve the page load performance by default - You can set the `scriptLoading` option to `'blocking'` to keep the previous behaviour
+* Setting publicPath to `''` (an empty string) will no longer calculate a relative path from the html file to the assets anymore - You can set the `publicPath` option to `'auto'` to keep the previous behaviour
+* Plugins for `html-webpack-plugin` which add additional assetTags should provide a `meta` attribute
+* Drop support for `appcache-webpack-plugin`
+### Features
+* drop `webpack` 4 and `node` <= 10 support to make use of the latest APIs ([b7a9e8f](https://github.com/jantimon/html-webpack-plugin/commit/b7a9e8f2a3c146cfec8f5c42888abd6aa0cde0b9))
+* use the new webpack 5 APIs and create html files during the new `webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS` compilation stage ([8964bc4](https://github.com/jantimon/html-webpack-plugin/commit/8964bc4182e41807a564d3000217a40bc5f93ad2), [b6895cb](https://github.com/jantimon/html-webpack-plugin/commit/b6895cb5b85b1e6e850f638470cf9b839d421516), [a97234e](https://github.com/jantimon/html-webpack-plugin/commit/a97234ead5ea2dbba07a6e6a70c5ddb6a5a3c288), [1b59e09](https://github.com/jantimon/html-webpack-plugin/commit/1b59e0944f561b264f11847ef245c9fc3f05b80f), [4fca596](https://github.com/jantimon/html-webpack-plugin/commit/4fca5965315c49f6706812d9fdf6c7284d23d75b), [ed64a6b](https://github.com/jantimon/html-webpack-plugin/commit/ed64a6b35fe9cdbc610e9b766700f3b2fc2b8e4c), [86245db](https://github.com/jantimon/html-webpack-plugin/commit/86245db670a9b3bdd0e2aba9f2031745a98434c7), [50b3bec](https://github.com/jantimon/html-webpack-plugin/commit/50b3bec51a43289d6d1b4e1e6439560eb791576f), [c697725](https://github.com/jantimon/html-webpack-plugin/commit/c697725e9f4dd990bd4b7927bbfa7b826d2f36f2))
+* allow generating one file per chunk with the new `'[name]'` placeholder for the `filename` option ([cd5bd2a](https://github.com/jantimon/html-webpack-plugin/commit/cd5bd2afc902bbe5a5ceec4756ef634a26aa1332), [3d9ff48](https://github.com/jantimon/html-webpack-plugin/commit/3d9ff48543d04d9f7c3440bfefb43751775a9e81))
+* the `filename` option can now be a function ([c5beb4b](https://github.com/jantimon/html-webpack-plugin/commit/c5beb4bd16e4916b5355c300abebf9d7d3c587da))
+* add support for `'auto'` public paths inside templates ([a059fcf](https://github.com/jantimon/html-webpack-plugin/commit/a059fcf32d94aaaa738359cedce0b0e4af68f0de), [b09b439](https://github.com/jantimon/html-webpack-plugin/commit/b09b439f50ecb75994acde2eb2967ad690ff1cf0))
+* use defer as default script loading mechanism ([35b6b87](https://github.com/jantimon/html-webpack-plugin/commit/35b6b878db17f0f5704a187b336a14fdd58cedfc))
+* allow to set publicPath to an empty string `''` ([5ea7de4](https://github.com/jantimon/html-webpack-plugin/commit/5ea7de4ba271813835be700316c8a1763b205d2d))
+* improve typings ([197ddd8](https://github.com/jantimon/html-webpack-plugin/commit/197ddd88f39a2e6e70863b6fed2385d33043d137))
+* provide public path to the alterAssetTagGroups hook ([1b54dfb](https://github.com/jantimon/html-webpack-plugin/commit/1b54dfbd62c0d0df10dd3d2be9937626142d518f))
+* provide public path to the alterAssetTags hook ([b754626](https://github.com/jantimon/html-webpack-plugin/commit/b75462653d11803a428b1d29479e259c3010163f))
+* use `thisCompilation` in child compiler for faster builds ([1d59e9a](https://github.com/jantimon/html-webpack-plugin/commit/1d59e9a71ddba1429168c42569a7bd9bdd363f4f))
+* export new major in static property ([8b692bd](https://github.com/jantimon/html-webpack-plugin/commit/8b692bd7cc0b75ddf55f47da317eed9bd19dab91))
+* reduce dependencies ([8c28aaa](https://github.com/jantimon/html-webpack-plugin/commit/8c28aaa2bed5a7147b397fef3801cfe8fb5c34b9), [56e633f](https://github.com/jantimon/html-webpack-plugin/commit/56e633fcb90909c2bbedbd63590ecaa825d8b31f))
+### Bug Fixes
+* emit files on every build to work properly with plugins like the
+clean-webpack-plugin ([6b3d087](https://github.com/jantimon/html-webpack-plugin/commit/6b3d087cf17f63b596c298d70a42a7462dd0f881))
+* generate html files even if no webpack entry exists ([2693dfa](https://github.com/jantimon/html-webpack-plugin/commit/2693dfaf4c94625eab86afadfd0e4d8822092d6b))
+* keep binary format when adding assets ([7e2b208](https://github.com/jantimon/html-webpack-plugin/commit/7e2b208634e26299c509e0c6b3189e01e4c3d3df)), closes [#1537](https://github.com/jantimon/html-webpack-plugin/issues/1537)
 ### [4.5.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.0...v4.5.1) (2021-01-03)

package/README.md CHANGED Viewed

@@ -88,6 +88,8 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
  * [csp-html-webpack-plugin](https://github.com/slackhq/csp-html-webpack-plugin) to add [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) meta tags to the HTML output
  * [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.
 <h2 align="center">Usage</h2>
@@ -148,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`|
@@ -519,6 +521,7 @@ about which values are passed.
         styles: Array<HtmlTagObject>,
         meta: Array<HtmlTagObject>,
       },
+      publicPath: string,
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>
@@ -530,6 +533,7 @@ about which values are passed.
     AsyncSeriesWaterfallHook<{
       headTags: Array<HtmlTagObject | HtmlTagObject>,
       bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      publicPath: string,
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>
@@ -666,5 +670,5 @@ This project uses the [semistandard code style](https://github.com/Flet/semistan
 [deps]: https://david-dm.org/jantimon/html-webpack-plugin.svg
 [deps-url]: https://david-dm.org/jantimon/html-webpack-plugin
-[tests]: http://img.shields.io/travis/jantimon/html-webpack-plugin.svg
-[tests-url]: https://travis-ci.org/jantimon/html-webpack-plugin
+[tests]: https://github.com/jantimon/html-webpack-plugin/workflows/CI/badge.svg
+[tests-url]: https://github.com/jantimon/html-webpack-plugin/actions?query=workflow%3ACI

package/index.js CHANGED Viewed

@@ -123,12 +123,20 @@ 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 +155,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
@@ -298,6 +307,7 @@ function hookIntoCompiler (compiler, options, plugin) {
                 ]
               },
               outputName: childCompilationOutputName,
+              publicPath: htmlPublicPath,
               plugin: plugin
             }))
             .then(({ assetTags }) => {
@@ -311,6 +321,7 @@ function hookIntoCompiler (compiler, options, plugin) {
                 headTags: assetGroups.headTags,
                 bodyTags: assetGroups.bodyTags,
                 outputName: childCompilationOutputName,
+                publicPath: htmlPublicPath,
                 plugin: plugin
               });
             });
@@ -715,6 +726,7 @@ function hookIntoCompiler (compiler, options, plugin) {
     return jsAssets.map(scriptAsset => ({
       tagName: 'script',
       voidTag: false,
+      meta: { plugin: 'html-webpack-plugin' },
       attributes: {
         defer: options.scriptLoading !== 'blocking',
         src: scriptAsset
@@ -731,6 +743,7 @@ function hookIntoCompiler (compiler, options, plugin) {
     return cssAssets.map(styleAsset => ({
       tagName: 'link',
       voidTag: true,
+      meta: { plugin: 'html-webpack-plugin' },
       attributes: {
         href: styleAsset,
         rel: 'stylesheet'
@@ -753,6 +766,7 @@ function hookIntoCompiler (compiler, options, plugin) {
       return [{
         tagName: 'base',
         voidTag: true,
+        meta: { plugin: 'html-webpack-plugin' },
         attributes: (typeof baseOption === 'string') ? {
           href: baseOption
         } : baseOption
@@ -795,6 +809,7 @@ function hookIntoCompiler (compiler, options, plugin) {
       return {
         tagName: 'meta',
         voidTag: true,
+        meta: { plugin: 'html-webpack-plugin' },
         attributes: metaTagAttributes
       };
     });
@@ -812,6 +827,7 @@ function hookIntoCompiler (compiler, options, plugin) {
     return [{
       tagName: 'link',
       voidTag: true,
+      meta: { plugin: 'html-webpack-plugin' },
       attributes: {
         rel: 'icon',
         href: faviconPath

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

@@ -32,6 +32,7 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
         styles: Array<HtmlTagObject>,
         meta: Array<HtmlTagObject>,
       },
+      publicPath: string,
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,
@@ -39,6 +40,7 @@ const AsyncSeriesWaterfallHook = require('tapable').AsyncSeriesWaterfallHook;
     AsyncSeriesWaterfallHook<{
       headTags: Array<HtmlTagObject | HtmlTagObject>,
       bodyTags: Array<HtmlTagObject | HtmlTagObject>,
+      publicPath: string,
       outputName: string,
       plugin: HtmlWebpackPlugin
     }>,

package/lib/html-tags.js CHANGED Viewed

@@ -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,18 +49,22 @@ 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|null|undefined}} [meta]
+ * meta information about the tag e.g. `{ 'plugin': 'html-webpack-plugin' }`
+ *
  * @returns {HtmlTagObject}
  */
-function createHtmlTagObject (tagName, attributes, innerHTML) {
+function createHtmlTagObject (tagName, attributes, innerHTML, meta) {
   return {
     tagName: tagName,
     voidTag: voidTags.indexOf(tagName) !== -1,
     attributes: attributes || {},
+    meta: meta || {},
     innerHTML: innerHTML
   };
 }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "5.0.0-beta.5",
+  "version": "5.2.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)",
@@ -34,8 +34,7 @@
     "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.0.0",
     "jest": "26.5.3",
     "mini-css-extract-plugin": "1.0.0",
     "pug": "2.0.3",
@@ -46,7 +45,7 @@
     "standard-version": "9.1.0",
     "style-loader": "2.0.0",
     "typescript": "4.1.3",
-    "webpack": "^5.10.0",
+    "webpack": "5.23.0",
     "webpack-recompilation-simulator": "3.2.0",
     "webpack-cli": "4.2.0"
   },
@@ -59,7 +58,7 @@
     "tapable": "^2.0.0"
   },
   "peerDependencies": {
-    "webpack": "^5.1.2"
+    "webpack": "^5.20.0"
   },
   "keywords": [
     "webpack",

package/typings.d.ts CHANGED Viewed

@@ -209,6 +209,7 @@ declare namespace HtmlWebpackPlugin {
         styles: HtmlTagObject[];
         meta: HtmlTagObject[];
       };
+      publicPath: string,
       outputName: string;
       plugin: HtmlWebpackPlugin;
     }>;
@@ -217,6 +218,7 @@ declare namespace HtmlWebpackPlugin {
       headTags: HtmlTagObject[];
       bodyTags: HtmlTagObject[];
       outputName: string;
+      publicPath: string,
       plugin: HtmlWebpackPlugin;
     }>;
@@ -261,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'`
@@ -276,5 +278,13 @@ declare namespace HtmlWebpackPlugin {
      * @see https://www.w3.org/TR/html5/syntax.html#void-elements
      */
     voidTag: boolean;
+    /**
+     * Meta information about the tag
+     * E.g. `{'plugin': 'html-webpack-plugin'}`
+     */
+    meta: {
+      plugin?: string,
+      [metaAttributeName: string]: any;
+    };
   }
 }