html-webpack-plugin 4.5.0 → 4.5.1

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 (4) hide show
  1. package/CHANGELOG.md +8 -1
  2. package/README.md +18 -9
  3. package/index.js +7 -1
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,7 +1,14 @@
1
- # Change Log
1
+ # Changelog
2
2
 
3
3
  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
4
 
5
+ ### [4.5.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.0...v4.5.1) (2021-01-03)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * inject javascripts in the <head> tag for inject:true and scriptLoading:'defer' ([4f7064e](https://github.com/jantimon/html-webpack-plugin/commit/4f7064ee56fe710e8f416018956647a72c270fb1))
11
+
5
12
  # [4.5.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.4.1...v4.5.0) (2020-09-21)
6
13
 
7
14
 
package/README.md CHANGED
@@ -21,6 +21,19 @@
21
21
 
22
22
  <h2 align="center">Install</h2>
23
23
 
24
+ <h3>Webpack 5</h3>
25
+
26
+ ```bash
27
+ npm i --save-dev html-webpack-plugin@next
28
+ ```
29
+
30
+ ```bash
31
+ yarn add --dev html-webpack-plugin@next
32
+ ```
33
+
34
+
35
+ <h3>Webpack 4</h3>
36
+
24
37
  ```bash
25
38
  npm i --save-dev html-webpack-plugin
26
39
  ```
@@ -60,18 +73,14 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
60
73
  * [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) for enhanced asset security
61
74
  * [appcache-webpack-plugin](https://github.com/lettertwo/appcache-webpack-plugin) for iOS and Android offline usage
62
75
  * [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin) which generates favicons and icons for iOS, Android and desktop browsers
63
- * [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin) can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
64
- * [html-webpack-inline-source-plugin](https://github.com/DustinJackson/html-webpack-inline-source-plugin) to inline your assets in the resulting HTML file
76
+ * [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin) can be used to always write to disk the html file, useful when webpack-dev-server / HMR are being used
65
77
  * [html-webpack-inline-svg-plugin](https://github.com/thegc/html-webpack-inline-svg-plugin) to inline SVGs in the resulting HTML file.
66
78
  * [html-webpack-exclude-assets-plugin](https://github.com/jamesjieye/html-webpack-exclude-assets-plugin) for excluding assets using regular expressions
67
79
  * [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).
68
- * [script-ext-html-webpack-plugin](https://github.com/numical/script-ext-html-webpack-plugin) to add `async`, `defer` or `module` attributes to your `<script>` elements, or even inline them
69
- * [style-ext-html-webpack-plugin](https://github.com/numical/style-ext-html-webpack-plugin) to convert your `<link>`s to external stylesheets into `<style>` elements containing internal CSS
70
80
  * [html-webpack-injector](https://github.com/thearchitgarg/html-webpack-injector) to inject chunks in `head` or `body` (different locations ) of same html document.
71
81
  * [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'>`
72
82
  * [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
73
83
  * [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
74
- * [inline-chunk-manifest-html-webpack-plugin](https://github.com/jouni-kantola/inline-chunk-manifest-html-webpack-plugin) for inlining webpack's chunk manifest. Default extracts manifest and inlines in `<head>`
75
84
  * [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.
76
85
  * [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.
77
86
  * [webpack-concat-plugin](https://github.com/hxlniada/webpack-concat-plugin) for concat and uglify files that needn't to be webpack bundles(for legacy files) and inject to html-webpack-plugin.
@@ -123,12 +132,12 @@ If you have multiple `webpack` entry points, they will all be included with `scr
123
132
  If you have any CSS assets in webpack's output (for example, CSS extracted with the [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin))
124
133
  then these will be included with `<link>` tags in the HTML head.
125
134
 
126
- If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated plugins.
135
+ If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated Plugins.
127
136
 
128
137
  <h2 align="center">Options</h2>
129
138
 
130
139
  You can pass a hash of configuration options to `html-webpack-plugin`.
131
- Allowed values are as follows
140
+ Allowed values are as follows:
132
141
 
133
142
  |Name|Type|Default|Description|
134
143
  |:--:|:--:|:-----:|:----------|
@@ -137,8 +146,8 @@ Allowed values are as follows
137
146
  |**`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|
138
147
  |**`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 |
139
148
  |**`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) |
140
- |**`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)|
141
- |**`publicPath`**|`{String|'auto'}`|`'auto'`|The publicPath used for script and link tags|
149
+ |**`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)|
150
+ |**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
142
151
  |**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
143
152
  |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
144
153
  |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
package/index.js CHANGED
@@ -23,6 +23,7 @@ const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./
23
23
  const prettyError = require('./lib/errors.js');
24
24
  const chunkSorter = require('./lib/chunksorter.js');
25
25
  const getHtmlWebpackPluginHooks = require('./lib/hooks.js').getHtmlWebpackPluginHooks;
26
+ const { assert } = require('console');
26
27
 
27
28
  const fsStatAsync = promisify(fs.stat);
28
29
  const fsReadFileAsync = promisify(fs.readFile);
@@ -65,6 +66,10 @@ class HtmlWebpackPlugin {
65
66
  /** @type {ProcessedHtmlWebpackOptions} */
66
67
  this.options = Object.assign(defaultOptions, userOptions);
67
68
 
69
+ // Assert correct option spelling
70
+ assert(this.options.scriptLoading === 'defer' || this.options.scriptLoading === 'blocking', 'scriptLoading needs to be set to "defer" or "blocking');
71
+ assert(this.options.inject === true || this.options.inject === false || this.options.inject === 'head' || this.options.inject === 'body', 'inject needs to be set to true, false, "head" or "body');
72
+
68
73
  // Default metaOptions if no template is provided
69
74
  if (!userOptions.template && this.options.templateContent === false && this.options.meta) {
70
75
  const defaultMeta = {
@@ -209,7 +214,8 @@ class HtmlWebpackPlugin {
209
214
  }))
210
215
  .then(({ assetTags }) => {
211
216
  // Inject scripts to body unless it set explicitly to head
212
- const scriptTarget = self.options.inject === 'head' ? 'head' : 'body';
217
+ const scriptTarget = self.options.inject === 'head' ||
218
+ (self.options.inject !== 'body' && self.options.scriptLoading === 'defer') ? 'head' : 'body';
213
219
  // Group assets to `head` and `body` tag arrays
214
220
  const assetGroups = this.generateAssetGroups(assetTags, scriptTarget);
215
221
  // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "html-webpack-plugin",
3
- "version": "4.5.0",
3
+ "version": "4.5.1",
4
4
  "license": "MIT",
5
5
  "description": "Simplifies creation of HTML files to serve your webpack bundles",
6
6
  "author": "Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
@@ -55,7 +55,7 @@
55
55
  "@types/webpack": "^4.41.8",
56
56
  "html-minifier-terser": "^5.0.1",
57
57
  "loader-utils": "^1.2.3",
58
- "lodash": "^4.17.15",
58
+ "lodash": "^4.17.20",
59
59
  "pretty-error": "^2.1.1",
60
60
  "tapable": "^1.1.3",
61
61
  "util.promisify": "1.0.0"