html-webpack-plugin 4.4.0 → 4.5.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 (5) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/README.md +23 -10
  3. package/index.js +29 -12
  4. package/package.json +3 -3
  5. package/typings.d.ts +6 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,41 @@
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.2](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.1...v4.5.2) (2021-02-18)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * more robust variable value extraction to add support for webpack >= 5.22.0 ([1aabaf9](https://github.com/jantimon/html-webpack-plugin/commit/1aabaf99820257cbe7d3efccb62b42254ad35e04))
11
+
12
+
13
+
14
+ ## [4.5.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.5.0...v4.5.1) (2021-01-03)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * inject javascripts in the <head> tag for inject:true and scriptLoading:'defer' ([4f7064e](https://github.com/jantimon/html-webpack-plugin/commit/4f7064ee56fe710e8f416018956647a72c270fb1))
20
+
21
+ # [4.5.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.4.1...v4.5.0) (2020-09-21)
22
+
23
+
24
+ ### Features
25
+
26
+ * Add publicPath option to overrule the default path generation ([#1516](https://github.com/jantimon/html-webpack-plugin/issues/1516)) ([19b5122](https://github.com/jantimon/html-webpack-plugin/commit/19b5122))
27
+ * update webpack dependency range to allow installing webpack 5 beta ([f3ccdd5](https://github.com/jantimon/html-webpack-plugin/commit/f3ccdd5)), closes [#1504](https://github.com/jantimon/html-webpack-plugin/issues/1504)
28
+
29
+
30
+
31
+ ## [4.4.1](https://github.com/jantimon/html-webpack-plugin/compare/v4.4.0...v4.4.1) (2020-08-30)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * broken typings.d.ts in v4.4.0 ([#1503](https://github.com/jantimon/html-webpack-plugin/issues/1503)) ([98ad756](https://github.com/jantimon/html-webpack-plugin/commit/98ad756))
37
+
38
+
39
+
5
40
  # [4.4.0](https://github.com/jantimon/html-webpack-plugin/compare/v4.3.0...v4.4.0) (2020-08-30)
6
41
 
7
42
 
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.
@@ -79,6 +88,8 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
79
88
  * [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
80
89
  * [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.
81
90
  * [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
91
+ * [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) allows to add preload links &lt;link rel='preload'> anywhere you want.
92
+
82
93
 
83
94
 
84
95
  <h2 align="center">Usage</h2>
@@ -123,12 +134,12 @@ If you have multiple `webpack` entry points, they will all be included with `scr
123
134
  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
135
  then these will be included with `<link>` tags in the HTML head.
125
136
 
126
- If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated plugins.
137
+ If you have plugins that make use of it, `html-webpack-plugin` should be ordered first before any of the integrated Plugins.
127
138
 
128
139
  <h2 align="center">Options</h2>
129
140
 
130
141
  You can pass a hash of configuration options to `html-webpack-plugin`.
131
- Allowed values are as follows
142
+ Allowed values are as follows:
132
143
 
133
144
  |Name|Type|Default|Description|
134
145
  |:--:|:--:|:-----:|:----------|
@@ -137,7 +148,8 @@ Allowed values are as follows
137
148
  |**`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
149
  |**`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
150
  |**`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)|
151
+ |**`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)|
152
+ |**`publicPath`**|`{String\|'auto'}`|`'auto'`|The publicPath used for script and link tags|
141
153
  |**`scriptLoading`**|`{'blocking'\|'defer'}`|`'blocking'`| Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. |
142
154
  |**`favicon`**|`{String}`|``|Adds the given favicon path to the output HTML|
143
155
  |**`meta`**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
@@ -356,6 +368,7 @@ and the following options:
356
368
  ```js
357
369
  {
358
370
  collapseWhitespace: true,
371
+ keepClosingSlash: true,
359
372
  removeComments: true,
360
373
  removeRedundantAttributes: true,
361
374
  removeScriptTypeAttributes: true,
@@ -655,5 +668,5 @@ This project uses the [semistandard code style](https://github.com/Flet/semistan
655
668
  [deps]: https://david-dm.org/jantimon/html-webpack-plugin.svg
656
669
  [deps-url]: https://david-dm.org/jantimon/html-webpack-plugin
657
670
 
658
- [tests]: http://img.shields.io/travis/jantimon/html-webpack-plugin.svg
659
- [tests-url]: https://travis-ci.org/jantimon/html-webpack-plugin
671
+ [tests]: https://github.com/jantimon/html-webpack-plugin/workflows/CI/badge.svg
672
+ [tests-url]: https://github.com/jantimon/html-webpack-plugin/actions?query=workflow%3ACI
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);
@@ -44,6 +45,7 @@ class HtmlWebpackPlugin {
44
45
  templateContent: false,
45
46
  templateParameters: templateParametersGenerator,
46
47
  filename: 'index.html',
48
+ publicPath: userOptions.publicPath === undefined ? 'auto' : userOptions.publicPath,
47
49
  hash: false,
48
50
  inject: userOptions.scriptLoading !== 'defer' ? 'body' : 'head',
49
51
  scriptLoading: 'blocking',
@@ -64,6 +66,10 @@ class HtmlWebpackPlugin {
64
66
  /** @type {ProcessedHtmlWebpackOptions} */
65
67
  this.options = Object.assign(defaultOptions, userOptions);
66
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
+
67
73
  // Default metaOptions if no template is provided
68
74
  if (!userOptions.template && this.options.templateContent === false && this.options.meta) {
69
75
  const defaultMeta = {
@@ -167,7 +173,7 @@ class HtmlWebpackPlugin {
167
173
  const isCompilationCached = templateResult.mainCompilationHash !== compilation.hash;
168
174
 
169
175
  // Turn the entry point names into file paths
170
- const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames);
176
+ const assets = self.htmlWebpackPluginAssets(compilation, childCompilationOutputName, sortedEntryNames, this.options.publicPath);
171
177
 
172
178
  // If the template and the assets did not change we don't have to emit the html
173
179
  const assetJson = JSON.stringify(self.getAssetFiles(assets));
@@ -208,7 +214,8 @@ class HtmlWebpackPlugin {
208
214
  }))
209
215
  .then(({ assetTags }) => {
210
216
  // Inject scripts to body unless it set explicitly to head
211
- 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';
212
219
  // Group assets to `head` and `body` tag arrays
213
220
  const assetGroups = this.generateAssetGroups(assetTags, scriptTarget);
214
221
  // Allow third-party-plugin authors to reorder and change the assetTags once they are grouped
@@ -309,8 +316,8 @@ class HtmlWebpackPlugin {
309
316
  return Promise.reject(new Error('The child compilation didn\'t provide a result'));
310
317
  }
311
318
  // The LibraryTemplatePlugin stores the template result in a local variable.
312
- // To extract the result during the evaluation this part has to be removed.
313
- source = source.replace('var HTML_WEBPACK_PLUGIN_RESULT =', '');
319
+ // Return the value from this variable
320
+ source += ';HTML_WEBPACK_PLUGIN_RESULT';
314
321
  const template = this.options.template.replace(/^.+!/, '').replace(/\?.+$/, '');
315
322
  const vmContext = vm.createContext(_.extend({ HTML_WEBPACK_PLUGIN: true, require: require, console: console }, global));
316
323
  const vmScript = new vm.Script(source, { filename: template });
@@ -519,6 +526,7 @@ class HtmlWebpackPlugin {
519
526
  * for all given entry names
520
527
  * @param {WebpackCompilation} compilation
521
528
  * @param {string[]} entryNames
529
+ * @param {string | 'auto'} customPublicPath
522
530
  * @returns {{
523
531
  publicPath: string,
524
532
  js: Array<string>,
@@ -527,7 +535,7 @@ class HtmlWebpackPlugin {
527
535
  favicon?: string
528
536
  }}
529
537
  */
530
- htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames) {
538
+ htmlWebpackPluginAssets (compilation, childCompilationOutputName, entryNames, customPublicPath) {
531
539
  const compilationHash = compilation.hash;
532
540
 
533
541
  /**
@@ -539,13 +547,22 @@ class HtmlWebpackPlugin {
539
547
  ? compilation.mainTemplate.getPublicPath({ hash: compilationHash })
540
548
  : compilation.getAssetPath(compilation.outputOptions.publicPath, { hash: compilationHash });
541
549
 
542
- const isPublicPathDefined = webpackPublicPath.trim() !== '';
543
- let publicPath = isPublicPathDefined
544
- // If a hard coded public path exists use it
545
- ? webpackPublicPath
546
- // If no public path was set get a relative url path
547
- : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
548
- .split(path.sep).join('/');
550
+ const isPublicPathDefined = webpackMajorVersion === 4
551
+ ? webpackPublicPath.trim() !== ''
552
+ // Webpack 5 introduced "auto" - however it can not be retrieved at runtime
553
+ : webpackPublicPath.trim() !== '' && webpackPublicPath !== 'auto';
554
+
555
+ let publicPath =
556
+ // If the html-webpack-plugin options contain a custom public path uset it
557
+ customPublicPath !== 'auto'
558
+ ? customPublicPath
559
+ : (isPublicPathDefined
560
+ // If a hard coded public path exists use it
561
+ ? webpackPublicPath
562
+ // If no public path was set get a relative url path
563
+ : path.relative(path.resolve(compilation.options.output.path, path.dirname(childCompilationOutputName)), compilation.options.output.path)
564
+ .split(path.sep).join('/')
565
+ );
549
566
 
550
567
  if (publicPath.length && publicPath.substr(-1, 1) !== '/') {
551
568
  publicPath += '/';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "html-webpack-plugin",
3
- "version": "4.4.0",
3
+ "version": "4.5.2",
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,13 +55,13 @@
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"
62
62
  },
63
63
  "peerDependencies": {
64
- "webpack": ">=4.0.0 < 6.0.0"
64
+ "webpack": "^4.0.0 || ^5.0.0"
65
65
  },
66
66
  "keywords": [
67
67
  "webpack",
package/typings.d.ts CHANGED
@@ -18,7 +18,7 @@ declare class HtmlWebpackPlugin {
18
18
  tagName: string,
19
19
  attributes?: { [attributeName: string]: string | boolean },
20
20
  innerHTML?: string
21
- ): HtmlTagObject;
21
+ ): HtmlWebpackPlugin.HtmlTagObject;
22
22
 
23
23
  static readonly version: number;
24
24
  }
@@ -63,6 +63,11 @@ declare namespace HtmlWebpackPlugin {
63
63
  * @default 'index.html'
64
64
  */
65
65
  filename: string;
66
+ /**
67
+ * By default the public path is set to `auto` - that way the html-webpack-plugin will try
68
+ * to set the publicPath according to the current filename and the webpack publicPath setting
69
+ */
70
+ publicPath: string | 'auto';
66
71
  /**
67
72
  * If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files.
68
73
  * This is useful for cache busting