html-webpack-plugin 5.5.4 → 5.6.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.
- package/README.md +147 -146
- package/index.js +785 -399
- package/lib/cached-child-compiler.js +172 -126
- package/lib/child-compiler.js +90 -56
- package/lib/chunksorter.js +7 -3
- package/lib/errors.js +10 -8
- package/lib/html-tags.js +41 -13
- package/lib/loader.js +26 -11
- package/package.json +37 -19
- package/typings.d.ts +9 -8
- package/lib/hooks.js +0 -108
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
[![tests][tests]][tests-url]
|
|
5
5
|
[](#backers)
|
|
6
|
-
|
|
6
|
+
[](#sponsors)
|
|
7
7
|
|
|
8
8
|
<div align="center">
|
|
9
9
|
<img width="200" height="200" src="https://www.w3.org/html/logo/downloads/HTML5_Badge.svg">
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
yarn add --dev html-webpack-plugin
|
|
31
31
|
```
|
|
32
32
|
|
|
33
|
-
|
|
34
33
|
<h3>Webpack 4</h3>
|
|
35
34
|
|
|
36
35
|
```bash
|
|
@@ -41,7 +40,6 @@
|
|
|
41
40
|
yarn add --dev html-webpack-plugin@4
|
|
42
41
|
```
|
|
43
42
|
|
|
44
|
-
|
|
45
43
|
This is a [webpack](http://webpack.js.org/) plugin that simplifies creation of HTML files to serve your `webpack` bundles. This is especially useful for `webpack` bundles that include a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply
|
|
46
44
|
your own template using `lodash` templates or use your own loader.
|
|
47
45
|
|
|
@@ -58,7 +56,7 @@ your own template using `lodash` templates or use your own loader.
|
|
|
58
56
|
<a href="https://opencollective.com/html-webpack-plugin/sponsor/8/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/8/avatar.svg"></a>
|
|
59
57
|
<a href="https://opencollective.com/html-webpack-plugin/sponsor/9/website" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/sponsor/9/avatar.svg"></a>
|
|
60
58
|
|
|
61
|
-
Thanks for supporting the ongoing improvements to the html-webpack-plugin!
|
|
59
|
+
Thanks for supporting the ongoing improvements to the html-webpack-plugin!
|
|
62
60
|
|
|
63
61
|
<h2 align="center">Zero Config</h2>
|
|
64
62
|
|
|
@@ -69,29 +67,29 @@ It's a great addition to the [⚙️ webpack-config-plugins](https://github.com/
|
|
|
69
67
|
|
|
70
68
|
The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webpack-plugin#events) to extend it to your needs. There are already some really powerful plugins which can be integrated with zero configuration
|
|
71
69
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
70
|
+
- [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity) for enhanced asset security
|
|
71
|
+
- [appcache-webpack-plugin](https://github.com/lettertwo/appcache-webpack-plugin) for iOS and Android offline usage
|
|
72
|
+
- [favicons-webpack-plugin](https://github.com/jantimon/favicons-webpack-plugin) which generates favicons and icons for iOS, Android and desktop browsers
|
|
73
|
+
- [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
|
|
74
|
+
- [html-webpack-inline-svg-plugin](https://github.com/thegc/html-webpack-inline-svg-plugin) to inline SVGs in the resulting HTML file.
|
|
75
|
+
- [html-webpack-exclude-assets-plugin](https://github.com/jamesjieye/html-webpack-exclude-assets-plugin) for excluding assets using regular expressions
|
|
76
|
+
- [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).
|
|
77
|
+
- [html-webpack-injector](https://github.com/thearchitgarg/html-webpack-injector) to inject chunks in `head` or `body` (different locations ) of same html document.
|
|
78
|
+
- [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'>`
|
|
79
|
+
- [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
|
|
80
|
+
- [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.
|
|
81
|
+
- [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.
|
|
82
|
+
- [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.
|
|
83
|
+
- [html-webpack-link-type-plugin](https://github.com/steadyapp/html-webpack-link-type-plugin) adds a configurable mimetype to resources injected as links (such as adding type="text/css" to external stylesheets) for compatibility with "strict mode".
|
|
84
|
+
- [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
|
|
85
|
+
- [strict-csp-html-webpack-plugin](https://github.com/google/strict-csp/tree/main/strict-csp-html-webpack-plugin) to add a [**strict** Content-Security-Policy (CSP)](https://web.dev) as a `meta` tag to the HTML output. A strict CSP is specifically efficient against XSS attacks.
|
|
86
|
+
- [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.
|
|
87
|
+
- [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
|
|
88
|
+
- [html-webpack-inject-preload](https://github.com/principalstudio/html-webpack-inject-preload) allows to add preload links <link rel='preload'> anywhere you want.
|
|
89
|
+
- [inject-body-webpack-plugin](https://github.com/Jaid/inject-body-webpack-plugin) is a simple method of injecting a custom HTML string into the body.
|
|
90
|
+
- [html-webpack-plugin-django](https://github.com/TommasoAmici/html-webpack-plugin-django) a Webpack plugin to inject Django static tags.
|
|
91
|
+
- [html-webpack-inject-attributes-plugin](https://github.com/dyw934854565/html-webpack-inject-attributes-plugin) add extra attributes to inject assetTags.
|
|
92
|
+
- [js-entry-webpack-plugin](https://github.com/liam61/html-webpack-plugin) creates webpack bundles into your js entry
|
|
95
93
|
|
|
96
94
|
<h2 align="center">Usage</h2>
|
|
97
95
|
|
|
@@ -100,33 +98,31 @@ bundles in the head using `script` tags. Just add the plugin to your `webpack`
|
|
|
100
98
|
config as follows:
|
|
101
99
|
|
|
102
100
|
**webpack.config.js**
|
|
101
|
+
|
|
103
102
|
```js
|
|
104
|
-
const HtmlWebpackPlugin = require(
|
|
103
|
+
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
105
104
|
|
|
106
105
|
module.exports = {
|
|
107
|
-
entry:
|
|
106
|
+
entry: "index.js",
|
|
108
107
|
output: {
|
|
109
|
-
path: __dirname +
|
|
110
|
-
filename:
|
|
108
|
+
path: __dirname + "/dist",
|
|
109
|
+
filename: "index_bundle.js",
|
|
111
110
|
},
|
|
112
|
-
plugins: [
|
|
113
|
-
|
|
114
|
-
]
|
|
115
|
-
}
|
|
111
|
+
plugins: [new HtmlWebpackPlugin()],
|
|
112
|
+
};
|
|
116
113
|
```
|
|
117
114
|
|
|
118
115
|
This will generate a file `dist/index.html` containing the following
|
|
119
116
|
|
|
120
117
|
```html
|
|
121
|
-
<!
|
|
118
|
+
<!doctype html>
|
|
122
119
|
<html>
|
|
123
120
|
<head>
|
|
124
|
-
<meta charset="utf-8"
|
|
121
|
+
<meta charset="utf-8" />
|
|
125
122
|
<title>Webpack App</title>
|
|
126
123
|
<script defer src="index_bundle.js"></script>
|
|
127
124
|
</head>
|
|
128
|
-
<body>
|
|
129
|
-
</body>
|
|
125
|
+
<body></body>
|
|
130
126
|
</html>
|
|
131
127
|
```
|
|
132
128
|
|
|
@@ -142,31 +138,32 @@ If you have plugins that make use of it, `html-webpack-plugin` should be ordered
|
|
|
142
138
|
You can pass a hash of configuration options to `html-webpack-plugin`.
|
|
143
139
|
Allowed values are as follows:
|
|
144
140
|
|
|
145
|
-
|Name|Type|Default|Description|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
141
|
+
| Name | Type | Default | Description |
|
|
142
|
+
| :----------------------: | :--------------------------------------------------: | :---------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
143
|
+
| **`title`** | `{String}` | `Webpack App` | The title to use for the generated HTML document |
|
|
144
|
+
| **`filename`** | `{String\|Function}` | `'index.html'` | The file to write the HTML to. Defaults to `index.html`. You can specify a subdirectory here too (eg: `assets/admin.html`). The `[name]` placeholder will be replaced with the entry name. Can also be a function e.g. `(entryName) => entryName + '.html'`. |
|
|
145
|
+
| **`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 |
|
|
146
|
+
| **`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 |
|
|
147
|
+
| **`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) |
|
|
148
|
+
| **`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) |
|
|
149
|
+
| **`publicPath`** | `{String\|'auto'}` | `'auto'` | The publicPath used for script and link tags |
|
|
150
|
+
| **`scriptLoading`** | `{'blocking'\|'defer'\|'module'\|'systemjs-module'}` | `'defer'` | Modern browsers support non blocking javascript loading (`'defer'`) to improve the page startup performance. Setting to `'module'` adds attribute [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html). This also implies "defer", since modules are automatically deferred. |
|
|
151
|
+
| **`favicon`** | `{String}` | `` | Adds the given favicon path to the output HTML |
|
|
152
|
+
| **`meta`** | `{Object}` | `{}` | Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}` |
|
|
153
|
+
| **`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` |
|
|
154
|
+
| **`minify`** | `{Boolean\|Object}` | `true` if `mode` is `'production'`, otherwise `false` | Controls if and in what ways the output should be minified. See [minification](#minification) below for more details. |
|
|
155
|
+
| **`hash`** | `{Boolean}` | `false` | If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files (i.e. `main.js?hash=compilation_hash`). This is useful for cache busting |
|
|
156
|
+
| **`cache`** | `{Boolean}` | `true` | Emit the file only if it was changed |
|
|
157
|
+
| **`showErrors`** | `{Boolean}` | `true` | Errors details will be written into the HTML page |
|
|
158
|
+
| **`chunks`** | `{?}` | `?` | Allows you to add only some chunks (e.g only the unit-test chunk) |
|
|
159
|
+
| **`chunksSortMode`** | `{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}` |
|
|
160
|
+
| **`excludeChunks`** | `{Array.<string>}` | `` | Allows you to skip some chunks (e.g don't add the unit-test chunk) |
|
|
161
|
+
| **`xhtml`** | `{Boolean}` | `false` | If `true` render the `link` tags as self-closing (XHTML compliant) |
|
|
166
162
|
|
|
167
163
|
Here's an example webpack config illustrating how to use these options
|
|
168
164
|
|
|
169
165
|
**webpack.config.js**
|
|
166
|
+
|
|
170
167
|
```js
|
|
171
168
|
{
|
|
172
169
|
entry: 'index.js',
|
|
@@ -189,6 +186,7 @@ To generate more than one HTML file, declare the plugin more than
|
|
|
189
186
|
once in your plugins array
|
|
190
187
|
|
|
191
188
|
**webpack.config.js**
|
|
189
|
+
|
|
192
190
|
```js
|
|
193
191
|
{
|
|
194
192
|
entry: 'index.js',
|
|
@@ -218,23 +216,23 @@ Details of other template loaders are [documented here](https://github.com/janti
|
|
|
218
216
|
```js
|
|
219
217
|
plugins: [
|
|
220
218
|
new HtmlWebpackPlugin({
|
|
221
|
-
title:
|
|
219
|
+
title: "Custom template",
|
|
222
220
|
// Load a custom template (lodash by default)
|
|
223
|
-
template:
|
|
224
|
-
})
|
|
225
|
-
]
|
|
221
|
+
template: "index.html",
|
|
222
|
+
}),
|
|
223
|
+
];
|
|
226
224
|
```
|
|
227
225
|
|
|
228
226
|
**index.html**
|
|
227
|
+
|
|
229
228
|
```html
|
|
230
|
-
<!
|
|
229
|
+
<!doctype html>
|
|
231
230
|
<html>
|
|
232
231
|
<head>
|
|
233
|
-
<meta charset="utf-8"/>
|
|
232
|
+
<meta charset="utf-8" />
|
|
234
233
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
|
235
234
|
</head>
|
|
236
|
-
<body>
|
|
237
|
-
</body>
|
|
235
|
+
<body></body>
|
|
238
236
|
</html>
|
|
239
237
|
```
|
|
240
238
|
|
|
@@ -242,6 +240,7 @@ If you already have a template loader, you can use it to parse the template.
|
|
|
242
240
|
Please note that this will also happen if you specify the html-loader and use `.html` file as template.
|
|
243
241
|
|
|
244
242
|
**webpack.config.js**
|
|
243
|
+
|
|
245
244
|
```js
|
|
246
245
|
module: {
|
|
247
246
|
loaders: [
|
|
@@ -263,22 +262,21 @@ The following variables are available in the template by default (you can extend
|
|
|
263
262
|
- `htmlWebpackPlugin`: data specific to this plugin
|
|
264
263
|
|
|
265
264
|
- `htmlWebpackPlugin.options`: the options hash that was passed to
|
|
266
|
-
|
|
267
|
-
|
|
265
|
+
the plugin. In addition to the options actually used by this plugin,
|
|
266
|
+
you can use this hash to pass arbitrary data through to your template.
|
|
268
267
|
|
|
269
268
|
- `htmlWebpackPlugin.tags`: the prepared `headTags` and `bodyTags` Array to render the `<base>`, `<meta>`, `<script>` and `<link>` tags.
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
269
|
+
Can be used directly in templates and literals. For example:
|
|
270
|
+
```html
|
|
271
|
+
<html>
|
|
272
|
+
<head>
|
|
273
|
+
<%= htmlWebpackPlugin.tags.headTags %>
|
|
274
|
+
</head>
|
|
275
|
+
<body>
|
|
276
|
+
<%= htmlWebpackPlugin.tags.bodyTags %>
|
|
277
|
+
</body>
|
|
278
|
+
</html>
|
|
279
|
+
```
|
|
282
280
|
- `htmlWebpackPlugin.files`: direct access to the files used during the compilation.
|
|
283
281
|
|
|
284
282
|
```typescript
|
|
@@ -289,7 +287,6 @@ The following variables are available in the template by default (you can extend
|
|
|
289
287
|
favicon?: string;
|
|
290
288
|
```
|
|
291
289
|
|
|
292
|
-
|
|
293
290
|
- `webpackConfig`: the webpack configuration that was used for this compilation. This
|
|
294
291
|
can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`).
|
|
295
292
|
|
|
@@ -298,11 +295,11 @@ The following variables are available in the template by default (you can extend
|
|
|
298
295
|
directly in the page, through `compilation.assets[...].source()`
|
|
299
296
|
(see [the inline template example](examples/inline/template.pug)).
|
|
300
297
|
|
|
301
|
-
|
|
302
298
|
The template can also be directly inlined directly into the options object.
|
|
303
299
|
⚠️ **`templateContent` does not allow to use webpack loaders for your template and will not watch for template file changes**
|
|
304
300
|
|
|
305
301
|
**webpack.config.js**
|
|
302
|
+
|
|
306
303
|
```js
|
|
307
304
|
new HtmlWebpackPlugin({
|
|
308
305
|
templateContent: `
|
|
@@ -311,18 +308,19 @@ new HtmlWebpackPlugin({
|
|
|
311
308
|
<h1>Hello World</h1>
|
|
312
309
|
</body>
|
|
313
310
|
</html>
|
|
314
|
-
|
|
315
|
-
})
|
|
311
|
+
`,
|
|
312
|
+
});
|
|
316
313
|
```
|
|
317
314
|
|
|
318
315
|
The `templateContent` can also access all `templateParameters` values.
|
|
319
316
|
⚠️ **`templateContent` does not allow to use webpack loaders for your template and will not watch for template file changes**
|
|
320
317
|
|
|
321
318
|
**webpack.config.js**
|
|
319
|
+
|
|
322
320
|
```js
|
|
323
321
|
new HtmlWebpackPlugin({
|
|
324
322
|
inject: false,
|
|
325
|
-
templateContent: ({htmlWebpackPlugin}) => `
|
|
323
|
+
templateContent: ({ htmlWebpackPlugin }) => `
|
|
326
324
|
<html>
|
|
327
325
|
<head>
|
|
328
326
|
${htmlWebpackPlugin.tags.headTags}
|
|
@@ -332,8 +330,8 @@ new HtmlWebpackPlugin({
|
|
|
332
330
|
${htmlWebpackPlugin.tags.bodyTags}
|
|
333
331
|
</body>
|
|
334
332
|
</html>
|
|
335
|
-
|
|
336
|
-
})
|
|
333
|
+
`,
|
|
334
|
+
});
|
|
337
335
|
```
|
|
338
336
|
|
|
339
337
|
### Filtering Chunks
|
|
@@ -341,23 +339,25 @@ new HtmlWebpackPlugin({
|
|
|
341
339
|
To include only certain chunks you can limit the chunks being used
|
|
342
340
|
|
|
343
341
|
**webpack.config.js**
|
|
342
|
+
|
|
344
343
|
```js
|
|
345
344
|
plugins: [
|
|
346
345
|
new HtmlWebpackPlugin({
|
|
347
|
-
chunks: [
|
|
348
|
-
})
|
|
349
|
-
]
|
|
346
|
+
chunks: ["app"],
|
|
347
|
+
}),
|
|
348
|
+
];
|
|
350
349
|
```
|
|
351
350
|
|
|
352
351
|
It is also possible to exclude certain chunks by setting the `excludeChunks` option
|
|
353
352
|
|
|
354
353
|
**webpack.config.js**
|
|
354
|
+
|
|
355
355
|
```js
|
|
356
356
|
plugins: [
|
|
357
357
|
new HtmlWebpackPlugin({
|
|
358
|
-
excludeChunks: [
|
|
359
|
-
})
|
|
360
|
-
]
|
|
358
|
+
excludeChunks: ["dev-helper"],
|
|
359
|
+
}),
|
|
360
|
+
];
|
|
361
361
|
```
|
|
362
362
|
|
|
363
363
|
### Minification
|
|
@@ -390,23 +390,24 @@ For the default template the html-webpack-plugin will already provide a default
|
|
|
390
390
|
|
|
391
391
|
Please take a look at this well maintained list of almost all [possible meta tags](https://github.com/joshbuchea/HEAD#meta).
|
|
392
392
|
|
|
393
|
-
#### name/content meta tags
|
|
393
|
+
#### name/content meta tags
|
|
394
394
|
|
|
395
395
|
Most meta tags are configured by setting a `name` and a `content` attribute.
|
|
396
396
|
To add those use a key/value pair:
|
|
397
397
|
|
|
398
398
|
**webpack.config.js**
|
|
399
|
+
|
|
399
400
|
```js
|
|
400
401
|
plugins: [
|
|
401
402
|
new HtmlWebpackPlugin({
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
})
|
|
409
|
-
]
|
|
403
|
+
meta: {
|
|
404
|
+
viewport: "width=device-width, initial-scale=1, shrink-to-fit=no",
|
|
405
|
+
// Will generate: <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
406
|
+
"theme-color": "#4285f4",
|
|
407
|
+
// Will generate: <meta name="theme-color" content="#4285f4">
|
|
408
|
+
},
|
|
409
|
+
}),
|
|
410
|
+
];
|
|
410
411
|
```
|
|
411
412
|
|
|
412
413
|
#### Simulate http response headers
|
|
@@ -415,19 +416,26 @@ The **http-equiv** attribute is essentially used to simulate a HTTP response hea
|
|
|
415
416
|
This format is supported using an object notation which allows you to add any attribute:
|
|
416
417
|
|
|
417
418
|
**webpack.config.js**
|
|
419
|
+
|
|
418
420
|
```js
|
|
419
421
|
plugins: [
|
|
420
422
|
new HtmlWebpackPlugin({
|
|
421
|
-
|
|
422
|
-
|
|
423
|
+
meta: {
|
|
424
|
+
"Content-Security-Policy": {
|
|
425
|
+
"http-equiv": "Content-Security-Policy",
|
|
426
|
+
content: "default-src https:",
|
|
427
|
+
},
|
|
423
428
|
// Will generate: <meta http-equiv="Content-Security-Policy" content="default-src https:">
|
|
424
429
|
// Which equals to the following http header: `Content-Security-Policy: default-src https:`
|
|
425
|
-
|
|
430
|
+
"set-cookie": {
|
|
431
|
+
"http-equiv": "set-cookie",
|
|
432
|
+
content: "name=value; expires=date; path=url",
|
|
433
|
+
},
|
|
426
434
|
// Will generate: <meta http-equiv="set-cookie" content="value; expires=date; path=url">
|
|
427
435
|
// Which equals to the following http header: `set-cookie: value; expires=date; path=url`
|
|
428
|
-
}
|
|
429
|
-
})
|
|
430
|
-
]
|
|
436
|
+
},
|
|
437
|
+
}),
|
|
438
|
+
];
|
|
431
439
|
```
|
|
432
440
|
|
|
433
441
|
### Base Tag
|
|
@@ -440,25 +448,25 @@ The following two are identical and will both insert `<base href="http://example
|
|
|
440
448
|
|
|
441
449
|
```js
|
|
442
450
|
new HtmlWebpackPlugin({
|
|
443
|
-
|
|
444
|
-
})
|
|
451
|
+
base: "http://example.com/some/page.html",
|
|
452
|
+
});
|
|
445
453
|
```
|
|
446
454
|
|
|
447
455
|
```js
|
|
448
456
|
new HtmlWebpackPlugin({
|
|
449
|
-
|
|
450
|
-
})
|
|
457
|
+
base: { href: "http://example.com/some/page.html" },
|
|
458
|
+
});
|
|
451
459
|
```
|
|
452
460
|
|
|
453
461
|
The `target` can be specified with the corresponding key:
|
|
454
462
|
|
|
455
463
|
```js
|
|
456
464
|
new HtmlWebpackPlugin({
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
}
|
|
461
|
-
})
|
|
465
|
+
base: {
|
|
466
|
+
href: "http://example.com/some/page.html",
|
|
467
|
+
target: "_blank",
|
|
468
|
+
},
|
|
469
|
+
});
|
|
462
470
|
```
|
|
463
471
|
|
|
464
472
|
which will inject the element `<base href="http://example.com/some/page.html" target="_blank">`.
|
|
@@ -472,9 +480,9 @@ For long term caching add `contenthash` to the filename.
|
|
|
472
480
|
```js
|
|
473
481
|
plugins: [
|
|
474
482
|
new HtmlWebpackPlugin({
|
|
475
|
-
filename:
|
|
476
|
-
})
|
|
477
|
-
]
|
|
483
|
+
filename: "index.[contenthash].html",
|
|
484
|
+
}),
|
|
485
|
+
];
|
|
478
486
|
```
|
|
479
487
|
|
|
480
488
|
`contenthash` is the hash of the content of the output file.
|
|
@@ -568,40 +576,40 @@ about which values are passed.
|
|
|
568
576
|
Example implementation: [webpack-subresource-integrity](https://www.npmjs.com/package/webpack-subresource-integrity)
|
|
569
577
|
|
|
570
578
|
**plugin.js**
|
|
579
|
+
|
|
571
580
|
```js
|
|
572
581
|
// If your plugin is direct dependent to the html webpack plugin:
|
|
573
|
-
const HtmlWebpackPlugin = require(
|
|
582
|
+
const HtmlWebpackPlugin = require("html-webpack-plugin");
|
|
574
583
|
// If your plugin is using html-webpack-plugin as an optional dependency
|
|
575
584
|
// you can use https://github.com/tallesl/node-safe-require instead:
|
|
576
|
-
const HtmlWebpackPlugin = require(
|
|
585
|
+
const HtmlWebpackPlugin = require("safe-require")("html-webpack-plugin");
|
|
577
586
|
|
|
578
587
|
class MyPlugin {
|
|
579
|
-
apply
|
|
580
|
-
compiler.hooks.compilation.tap(
|
|
581
|
-
console.log(
|
|
588
|
+
apply(compiler) {
|
|
589
|
+
compiler.hooks.compilation.tap("MyPlugin", (compilation) => {
|
|
590
|
+
console.log("The compiler is starting a new compilation...");
|
|
582
591
|
|
|
583
|
-
// Static Plugin interface |compilation |HOOK NAME | register listener
|
|
584
|
-
HtmlWebpackPlugin.
|
|
585
|
-
|
|
592
|
+
// Static Plugin interface |compilation |HOOK NAME | register listener
|
|
593
|
+
HtmlWebpackPlugin.getCompilationHooks(compilation).beforeEmit.tapAsync(
|
|
594
|
+
"MyPlugin", // <-- Set a meaningful name here for stacktraces
|
|
586
595
|
(data, cb) => {
|
|
587
596
|
// Manipulate the content
|
|
588
|
-
data.html +=
|
|
597
|
+
data.html += "The Magic Footer";
|
|
589
598
|
// Tell webpack to move on
|
|
590
|
-
cb(null, data)
|
|
591
|
-
}
|
|
592
|
-
)
|
|
593
|
-
})
|
|
599
|
+
cb(null, data);
|
|
600
|
+
},
|
|
601
|
+
);
|
|
602
|
+
});
|
|
594
603
|
}
|
|
595
604
|
}
|
|
596
605
|
|
|
597
|
-
module.exports = MyPlugin
|
|
606
|
+
module.exports = MyPlugin;
|
|
598
607
|
```
|
|
599
608
|
|
|
600
609
|
**webpack.config.js**
|
|
610
|
+
|
|
601
611
|
```js
|
|
602
|
-
plugins: [
|
|
603
|
-
new MyPlugin({ options: '' })
|
|
604
|
-
]
|
|
612
|
+
plugins: [new MyPlugin({ options: "" })];
|
|
605
613
|
```
|
|
606
614
|
|
|
607
615
|
Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event
|
|
@@ -627,7 +635,6 @@ Note that the callback must be passed the HtmlWebpackPluginData in order to pass
|
|
|
627
635
|
<tbody>
|
|
628
636
|
</table>
|
|
629
637
|
|
|
630
|
-
|
|
631
638
|
## Backers
|
|
632
639
|
|
|
633
640
|
Thank you to all our backers!
|
|
@@ -644,23 +651,17 @@ If you want to support the project as well [become a sponsor](https://opencollec
|
|
|
644
651
|
<a href="https://opencollective.com/html-webpack-plugin/backer/8/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/8/avatar.svg?requireActive=false"></a>
|
|
645
652
|
<a href="https://opencollective.com/html-webpack-plugin/backer/9/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/9/avatar.svg?requireActive=false"></a>
|
|
646
653
|
|
|
647
|
-
|
|
648
654
|
## Contributors
|
|
649
655
|
|
|
650
656
|
This project exists thanks to all the people who contribute.
|
|
651
657
|
|
|
652
658
|
You're free to contribute to this project by submitting [issues](https://github.com/jantimon/html-webpack-plugin/issues) and/or [pull requests](https://github.com/jantimon/html-webpack-plugin/pulls). This project is test-driven, so keep in mind that every change and new feature should be covered by tests.
|
|
653
659
|
|
|
654
|
-
This project uses the [semistandard code style](https://github.com/Flet/semistandard).
|
|
655
|
-
|
|
656
660
|
<a href="https://github.com/jantimon/html-webpack-plugin/graphs/contributors"><img src="https://opencollective.com/html-webpack-plugin/contributors.svg?width=890&button=false" /></a>
|
|
657
661
|
|
|
658
|
-
|
|
659
662
|
[npm]: https://img.shields.io/npm/v/html-webpack-plugin.svg
|
|
660
663
|
[npm-url]: https://npmjs.com/package/html-webpack-plugin
|
|
661
|
-
|
|
662
664
|
[node]: https://img.shields.io/node/v/html-webpack-plugin.svg
|
|
663
665
|
[node-url]: https://nodejs.org
|
|
664
|
-
|
|
665
666
|
[tests]: https://github.com/jantimon/html-webpack-plugin/workflows/CI/badge.svg
|
|
666
667
|
[tests-url]: https://github.com/jantimon/html-webpack-plugin/actions?query=workflow%3ACI
|