html-webpack-plugin 4.0.2 → 4.2.0

package/CHANGELOG.md

@@ -2,6 +2,43 @@
 
 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.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)
+
+
+### Features
+
+* Add webpack 5 support ([39c38a4](https://github.com/jantimon/html-webpack-plugin/commit/39c38a4))
+* Allow webpack 5 as peer dependency ([9c571e2](https://github.com/jantimon/html-webpack-plugin/commit/9c571e2))
+
+
+
+## [4.0.4](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.3...v4.0.4) (2020-04-01)
+
+
+### Bug Fixes
+
+* Fix querystring encoding ([#1386](https://github.com/jantimon/html-webpack-plugin/issues/1386)) ([4f48a39](https://github.com/jantimon/html-webpack-plugin/commit/4f48a39e5738a5d431be2bec39c1b1f0de800d57)), closes [#1355](https://github.com/jantimon/html-webpack-plugin/issues/1355)
+
+
+
+## [4.0.3](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.2...v4.0.3) (2020-03-28)
+
+
+### Bug Fixes
+
+* add webpack, tapable and html-minifier-terser as dependencies because of types.d.ts ([238da81](https://github.com/jantimon/html-webpack-plugin/commit/238da8123950f87267954fd448f3e6b0fb1ead17))
+
+
+
 ## [4.0.2](https://github.com/jantimon/html-webpack-plugin/compare/v4.0.1...v4.0.2) (2020-03-26)
 
 

package/README.md

@@ -134,6 +134,7 @@ 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|
+|**`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}`|``| 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. |
@@ -243,40 +244,40 @@ 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;
+    ```
+
+  - `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.
 
 - `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 +288,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.  
+⚠️ **This approach does not allow to use weboack loaders for your template and will not update the template on changes**
+
+**webpack.config.js**
+```js
+new HtmlWebpackPlugin({
+  templateContent: `
+    <html>
+      <body>
+        <h1>Hello World</h1>
+      </body>
+    </html>
+  `
+})
+```
+
+The `templateContent` can also access all `templateParameters` values.  
+⚠️ **This approach does not allow to use weboack loaders for your template and will not update the template on changes**
+
+**webpack.config.js**
+```js
+new HtmlWebpackPlugin({
+  injext: 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

@@ -16,10 +16,10 @@ 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 } = require('./lib/html-tags');
+const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags');
 
-const childCompiler = require('./lib/compiler.js');
 const prettyError = require('./lib/errors.js');
 const chunkSorter = require('./lib/chunksorter.js');
 const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks;
@@ -74,10 +74,6 @@ class HtmlWebpackPlugin {
     // Instance variables to keep caching information
     // for multiple builds
     this.childCompilerHash = undefined;
-    /**
-     * @type {string | undefined}
-     */
-    this.childCompilationOutputName = undefined;
     this.assetJson = undefined;
     this.hash = undefined;
     this.version = HtmlWebpackPlugin.version;
@@ -89,12 +85,15 @@ class HtmlWebpackPlugin {
    */
   apply (compiler) {
     const self = this;
-    let isCompilationCached = false;
-    /** @type Promise<string> */
-    let compilationPromise;
 
     this.options.template = this.getFullTemplatePath(this.options.template, compiler.context);
 
+    // Inject child compiler plugin
+    const childCompilerPlugin = new CachedChildCompilation(compiler);
+    if (!this.options.templateContent) {
+      childCompilerPlugin.addEntry(this.options.template);
+    }
+
     // convert absolute filename into relative so that webpack can
     // generate it at correct location
     const filename = this.options.filename;
@@ -128,75 +127,42 @@ class HtmlWebpackPlugin {
       };
     }
 
-    // Clear the cache once a new HtmlWebpackPlugin is added
-    childCompiler.clearCache(compiler);
-
-    // Register all HtmlWebpackPlugins instances at the child compiler
-    compiler.hooks.thisCompilation.tap('HtmlWebpackPlugin', (compilation) => {
-      // Clear the cache if the child compiler is outdated
-      if (childCompiler.hasOutDatedTemplateCache(compilation)) {
-        childCompiler.clearCache(compiler);
-      }
-      // Add this instances template to the child compiler
-      childCompiler.addTemplateToCompiler(compiler, this.options.template);
-      // Add file dependencies of child compiler to parent compiler
-      // to keep them watched even if we get the result from the cache
-      compilation.hooks.additionalChunkAssets.tap('HtmlWebpackPlugin', () => {
-        const childCompilerDependencies = childCompiler.getFileDependencies(compiler);
-        childCompilerDependencies.forEach(fileDependency => {
-          compilation.compilationDependencies.add(fileDependency);
-        });
-      });
-    });
-
-    compiler.hooks.make.tapAsync('HtmlWebpackPlugin', (compilation, callback) => {
-      // Compile the template (queued)
-      compilationPromise = childCompiler.compileTemplate(self.options.template, self.options.filename, compilation)
-        .catch(err => {
-          compilation.errors.push(prettyError(err, compiler.context).toString());
-          return {
-            content: self.options.showErrors ? prettyError(err, compiler.context).toJsonHtml() : 'ERROR',
-            outputName: self.options.filename,
-            hash: ''
-          };
-        })
-        .then(compilationResult => {
-          // If the compilation change didnt change the cache is valid
-          isCompilationCached = Boolean(compilationResult.hash) && self.childCompilerHash === compilationResult.hash;
-          self.childCompilerHash = compilationResult.hash;
-          self.childCompilationOutputName = compilationResult.outputName;
-          callback();
-          return compilationResult.content;
-        });
-    });
-
     compiler.hooks.emit.tapAsync('HtmlWebpackPlugin',
       /**
        * Hook into the webpack emit phase
        * @param {WebpackCompilation} compilation
-       * @param {() => void} callback
+       * @param {(err?: Error) => void} callback
       */
       (compilation, callback) => {
         // Get all entry point names for this html file
         const entryNames = Array.from(compilation.entrypoints.keys());
         const filteredEntryNames = self.filterChunks(entryNames, self.options.chunks, self.options.excludeChunks);
         const sortedEntryNames = self.sortEntryChunks(filteredEntryNames, this.options.chunksSortMode, compilation);
-        const childCompilationOutputName = self.childCompilationOutputName;
 
-        if (childCompilationOutputName === undefined) {
-          throw new Error('Did not receive child compilation result');
+        const templateResult = this.options.templateContent
+          ? { mainCompilationHash: compilation.hash }
+          : childCompilerPlugin.getCompilationEntryResult(this.options.template);
+
+        this.childCompilerHash = templateResult.mainCompilationHash;
+
+        if ('error' in templateResult) {
+          compilation.errors.push(prettyError(templateResult.error, compiler.context).toString());
         }
 
+        const childCompilationOutputName = compilation.mainTemplate.getAssetPath(this.options.filename, 'compiledEntry' in templateResult ? {
+          hash: templateResult.compiledEntry.hash,
+          chunk: templateResult.compiledEntry.entry
+        } : {
+          hash: templateResult.mainCompilationHash
+        });
+
+        // If the child compilation was not executed during a previous main compile run
+        // it is a cached result
+        const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
+
         // Turn the entry point names into file paths
         const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames);
 
-        // If this is a hot update compilation, move on!
-        // This solves a problem where an `index.html` file is generated for hot-update js files
-        // It only happens in Webpack 2, where hot updates are emitted separately before the full bundle
-        if (self.isHotUpdateCompilation(assets)) {
-          return callback();
-        }
-
         // If the template and the assets did not change we don't have to emit the html
         const assetJson = JSON.stringify(self.getAssetFiles(assets));
         if (isCompilationCached && self.options.cache && assetJson === self.assetJson) {
@@ -249,15 +215,20 @@ class HtmlWebpackPlugin {
           });
 
         // Turn the compiled tempalte into a nodejs function or into a nodejs string
-        const templateEvaluationPromise = compilationPromise
-          .then(compiledTemplate => {
+        const templateEvaluationPromise = Promise.resolve()
+          .then(() => {
+            if ('error' in templateResult) {
+              return self.options.showErrors ? prettyError(templateResult.error, compiler.context).toHtml() : 'ERROR';
+            }
             // Allow to use a custom function / string instead
             if (self.options.templateContent !== false) {
               return self.options.templateContent;
             }
             // Once everything is compiled evaluate the html factory
             // and replace it with its content
-            return self.evaluateCompilationResult(compilation, compiledTemplate);
+            return ('compiledEntry' in templateResult)
+              ? self.evaluateCompilationResult(compilation, templateResult.compiledEntry.content)
+              : Promise.reject(new Error('Child compilation contained no compiledEntry'));
           });
 
         const templateExectutionPromise = Promise.all([assetsPromise, assetTagGroupsPromise, templateEvaluationPromise])
@@ -851,17 +822,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;
+    }));
   }
 
   /**
@@ -939,10 +906,35 @@ class HtmlWebpackPlugin {
    * Encode each path component using `encodeURIComponent` as files can contain characters
    * which needs special encoding in URLs like `+ `.
    *
+   * Valid filesystem characters which need to be encoded for urls:
+   *
+   * # pound, % percent, & ampersand, { left curly bracket, } right curly bracket,
+   * \ back slash, < left angle bracket, > right angle bracket, * asterisk, ? question mark,
+   * blank spaces, $ dollar sign, ! exclamation point, ' single quotes, " double quotes,
+   * : colon, @ at sign, + plus sign, ` backtick, | pipe, = equal sign
+   *
+   * However the query string must not be encoded:
+   *
+   *  fo:demonstration-path/very fancy+name.js?path=/home?value=abc&value=def#zzz
+   *    ^             ^    ^    ^     ^    ^  ^    ^^    ^     ^   ^     ^   ^
+   *    |             |    |    |     |    |  |    ||    |     |   |     |   |
+   *    encoded       |    |    encoded    |  |    ||    |     |   |     |   |
+   *                 ignored              ignored  ignored     ignored   ignored
+   *
    * @param {string} filePath
    */
   urlencodePath (filePath) {
-    return filePath.split('/').map(encodeURIComponent).join('/');
+    // People use the filepath in quite unexpected ways.
+    // Try to extract the first querystring of the url:
+    //
+    // some+path/demo.html?value=abc?def
+    //
+    const queryStringStart = filePath.indexOf('?');
+    const urlPath = queryStringStart === -1 ? filePath : filePath.substr(0, queryStringStart);
+    const queryString = filePath.substr(urlPath.length);
+    // Encode all parts except '/' which are not part of the querystring:
+    const encodedUrlPath = urlPath.split('/').map(encodeURIComponent).join('/');
+    return encodedUrlPath + queryString;
   }
 
   /**