html-webpack-plugin 4.1.0 → 4.3.0

package/CHANGELOG.md

@@ -2,6 +2,44 @@
 
 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.
 
+# [4.3.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.2...v4.3.0) (2020-04-30)
+
+
+### Features
+
+* Allow to use console.log inside templates ([c3f2fdc](https://github.com/jantimon/html-webpack-plugin/commit/c3f2fdc))
+
+
+
+## [4.2.2](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.1...v4.2.2) (2020-04-30)
+
+
+### Bug Fixes
+
+* Prevent "cannot read property info of undefined" when reading meta information from assets ([253ce30](https://github.com/jantimon/html-webpack-plugin/commit/253ce30))
+* use modern icon tag rel attribute for favicons ([c40dd85](https://github.com/jantimon/html-webpack-plugin/commit/c40dd85))
+
+
+
+## [4.2.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.2.0...v4.2.1) (2020-04-28)
+
+
+### Bug Fixes
+
+* don't add dependencies twice to the webpack 5 watcher api ([ceafe14](https://github.com/jantimon/html-webpack-plugin/commit/ceafe143650749a5f53a14411dc1b762e252ec44))
+* prevent scripts marked as hotModuleReplacement from being added to the html file ([119252a](https://github.com/jantimon/html-webpack-plugin/commit/119252a381bf43dea37c1be64f90c10bebc21302))
+
+
+
+# [4.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.1.0...v4.2.0) (2020-04-09)
+
+
+### Features
+
+* Add template content ([#1401](https://github.com/jantimon/html-webpack-plugin/issues/1401)) ([4740bf7](https://github.com/jantimon/html-webpack-plugin/commit/4740bf7))
+
+
+
 # [4.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.4...v4.1.0) (2020-04-09)
 
 

package/README.md

@@ -134,7 +134,8 @@ Allowed values are as follows
 |**`title`**|`{String}`|`Webpack App`|The title to use for the generated HTML document|
 |**`filename`**|`{String}`|`'index.html'`|The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`)|
 |**`template`**|`{String}`|``|`webpack` relative or absolute path to the template. By default it will use `src/index.ejs` if it exists. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
-|**`templateParameters`**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template - see [example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/template-parameters) |
+|**`templateContent`**|`{string\|Function\|false}`|false| Can be used instead of `template` to provide an inline template - please read the [Writing Your Own Templates](https://github.com/jantimon/html-webpack-plugin#writing-your-own-templates) section |
+|**`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 `true` or `'body'` all javascript resources will be placed at the bottom of the body element. `'head'` will place the scripts in the head element - see the [inject:false example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/custom-insertion-position)|
 |**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| 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|
@@ -145,7 +146,7 @@ Allowed values are as follows
 |**`cache`**|`{Boolean}`|`true`|Emit the file only if it was changed|
 |**`showErrors`**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
 |**`chunks`**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
-|**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}`|
+|**[`chunksSortMode`](#plugins)**|`{String\|Function}`|`auto`|Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are `'none' \| 'auto' \| 'manual' \| {Function}`|
 |**`excludeChunks`**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
 |**`xhtml`**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|
 
@@ -243,40 +244,37 @@ plugins: [
 
 You can use the `lodash` syntax out of the box. If the `inject` feature doesn't fit your needs and you want full control over the asset placement use the [default template](https://github.com/jaketrent/html-webpack-template/blob/86f285d5c790a6c15263f5cc50fd666d51f974fd/index.html) of the [html-webpack-template project](https://github.com/jaketrent/html-webpack-template) as a starting point for writing your own.
 
-The following variables are available in the template:
+The following variables are available in the template by default (you can extend them using the `templateParameters` option):
+
 - `htmlWebpackPlugin`: data specific to this plugin
-  - `htmlWebpackPlugin.files`: a massaged representation of the
-    `assetsByChunkName` attribute of webpack's [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
-    object. It contains a mapping from entry point name to the bundle filename, eg:
-    ```json
-    "htmlWebpackPlugin": {
-      "files": {
-        "css": [ "main.css" ],
-        "js": [ "assets/head_bundle.js", "assets/main_bundle.js"],
-        "chunks": {
-          "head": {
-            "entry": "assets/head_bundle.js",
-            "css": [ "main.css" ]
-          },
-          "main": {
-            "entry": "assets/main_bundle.js",
-            "css": []
-          },
-        }
-      }
-    }
-    ```
-    If you've set a publicPath in your webpack config this will be reflected
-    correctly in this assets hash.
 
   - `htmlWebpackPlugin.options`: the options hash that was passed to
      the plugin. In addition to the options actually used by this plugin,
      you can use this hash to pass arbitrary data through to your template.
 
-- `webpack`: the webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
-  object. Note that this is the stats object as it was at the time the HTML template
-  was emitted and as such may not have the full set of stats that are available
-  after the webpack run is complete.
+  - `htmlWebpackPlugin.tags`: the prepared `headTags` and `bodyTags` Array to render the `<base>`, `<meta>`, `<script>` and `<link>` tags.
+     Can be used directly in templates and literals. For example: 
+     ```html
+     <html>
+       <head>
+         <%= htmlWebpackPlugin.tags.headTags %>
+       </head>
+       <body>
+         <%= htmlWebpackPlugin.tags.bodyTags %>
+       </body>
+     </html>
+     ```
+  
+  - `htmlWebpackPlugin.files`: direct access to the files used during the compilation.
+
+    ```typescript
+    publicPath: string;
+    js: string[];
+    css: string[];
+    manifest?: string;
+    favicon?: string;
+    ```
+
 
 - `webpackConfig`: the webpack configuration that was used for this compilation. This
   can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`).
@@ -287,6 +285,43 @@ The following variables are available in the template:
   (see [the inline template example](examples/inline/template.pug)).
 
 
+The template can also be directly inlined directly into the options object.  
+⚠️ **`templateContent` does not allow to use webpack loaders for your template and will not watch for template file changes**
+
+**webpack.config.js**
+```js
+new HtmlWebpackPlugin({
+  templateContent: `
+    <html>
+      <body>
+        <h1>Hello World</h1>
+      </body>
+    </html>
+  `
+})
+```
+
+The `templateContent` can also access all `templateParameters` values.  
+⚠️ **`templateContent` does not allow to use webpack loaders for your template and will not watch for template file changes**
+
+**webpack.config.js**
+```js
+new HtmlWebpackPlugin({
+  inject: false,
+  templateContent: ({htmlWebpackPlugin}) => `
+    <html>
+      <head>
+        ${htmlWebpackPlugin.tags.headTags}
+      </head>
+      <body>
+        <h1>Hello World</h1>
+        ${htmlWebpackPlugin.tags.bodyTags}
+      </body>
+    </html>
+  `
+})
+```
+
 ### Filtering Chunks
 
 To include only certain chunks you can limit the chunks being used

package/index.js

@@ -18,7 +18,7 @@ const path = require('path');
 const loaderUtils = require('loader-utils');
 const { CachedChildCompilation } = require('./lib/cached-child-compiler');
 
-const { createHtmlTagObject, htmlTagObjectToString } = require('./lib/html-tags');
+const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags');
 
 const prettyError = require('./lib/errors.js');
 const chunkSorter = require('./lib/chunksorter.js');
@@ -306,7 +306,7 @@ class HtmlWebpackPlugin {
     // To extract the result during the evaluation this part has to be removed.
     source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
     const template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, '');
-    const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require }, global));
+    const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require, console: console }, global));
     const vmScript = new vm.Script(source, { filename: template });
     // Evaluate code and cast to string
     let newSource;
@@ -574,7 +574,22 @@ class HtmlWebpackPlugin {
     const extensionRegexp = /\.(css|js|mjs)(\?|$)/;
     for (let i = 0; i < entryNames.length; i++) {
       const entryName = entryNames[i];
-      const entryPointFiles = compilation.entrypoints.get(entryName).getFiles();
+      /** entryPointUnfilteredFiles - also includes hot module update files */
+      const entryPointUnfilteredFiles = compilation.entrypoints.get(entryName).getFiles();
+
+      const entryPointFiles = entryPointUnfilteredFiles.filter((chunkFile) => {
+        // compilation.getAsset was introduced in webpack 4.4.0
+        // once the support pre webpack 4.4.0 is dropped please
+        // remove the following guard:
+        const asset = compilation.getAsset && compilation.getAsset(chunkFile);
+        if (!asset) {
+          return true;
+        }
+        // Prevent hot-module files from beeing included:
+        const assetMetaInformation = asset.info || {};
+        return !(assetMetaInformation.hotModuleReplacement || assetMetaInformation.development);
+      });
+
       // Prepend the publicPath and append the hash depending on the
       // webpack.output.publicPath and hashOptions
       // E.g. bundle.js -> /bundle.js?hash
@@ -771,7 +786,7 @@ class HtmlWebpackPlugin {
       tagName: 'link',
       voidTag: true,
       attributes: {
-        rel: 'shortcut icon',
+        rel: 'icon',
         href: faviconPath
       }
     }];
@@ -822,17 +837,13 @@ class HtmlWebpackPlugin {
    */
   prepareAssetTagGroupForRendering (assetTagGroup) {
     const xhtml = this.options.xhtml;
-    const preparedTags = assetTagGroup.map((assetTag) => {
+    return HtmlTagArray.from(assetTagGroup.map((assetTag) => {
       const copiedAssetTag = Object.assign({}, assetTag);
       copiedAssetTag.toString = function () {
         return htmlTagObjectToString(this, xhtml);
       };
       return copiedAssetTag;
-    });
-    preparedTags.toString = function () {
-      return this.join('');
-    };
-    return preparedTags;
+    }));
   }
 
   /**

package/lib/html-tags.js

@@ -65,7 +65,31 @@ function createHtmlTagObject (tagName, attributes, innerHTML) {
   };
 }
 
+/**
+ * The `HtmlTagArray Array with a custom `.toString()` method.
+ *
+ * This allows the following:
+ * ```
+ *   const tags = HtmlTagArray.from([tag1, tag2]);
+ *   const scriptTags = tags.filter((tag) => tag.tagName === 'script');
+ *   const html = scriptTags.toString();
+ * ```
+ *
+ * Or inside a string literal:
+ * ```
+ *   const tags = HtmlTagArray.from([tag1, tag2]);
+ *   const html = `<html><body>${tags.filter((tag) => tag.tagName === 'script')}</body></html>`;
+ * ```
+ *
+ */
+class HtmlTagArray extends Array {
+  toString () {
+    return this.join('');
+  }
+}
+
 module.exports = {
+  HtmlTagArray: HtmlTagArray,
   createHtmlTagObject: createHtmlTagObject,
   htmlTagObjectToString: htmlTagObjectToString
 };

package/lib/webpack5/file-watcher-api.js

@@ -58,7 +58,6 @@ function isSnapShotValid (snapshot, mainCompilation) {
 function watchFiles (mainCompilation, fileDependencies) {
   Object.keys(fileDependencies).forEach((depencyTypes) => {
     fileDependencies[depencyTypes].forEach(fileDependency => {
-      mainCompilation.fileDependencies.add(fileDependency);
       mainCompilation[depencyTypes].add(fileDependency);
     });
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-plugin",
-  "version": "4.1.0",
+  "version": "4.3.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)",

package/typings.d.ts

@@ -109,6 +109,7 @@ declare namespace HtmlWebpackPlugin {
     templateContent:
       | false // Use the template option instead to load a file
       | string
+      | ((templateParameters: { [option: string]: any }) => (string | Promise<string>))
       | Promise<string>;
     /**
      * Allows to overwrite the parameters used in the template