html-webpack-plugin 3.1.0 → 4.0.0-alpha.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 (11) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +113 -36
  3. package/default_index.ejs +1 -1
  4. package/index.js +618 -397
  5. package/lib/chunksorter.js +19 -116
  6. package/lib/compiler.js +359 -101
  7. package/lib/errors.js +2 -1
  8. package/lib/hooks.js +116 -0
  9. package/lib/html-tags.js +73 -0
  10. package/lib/loader.js +16 -34
  11. package/package.json +34 -15
package/CHANGELOG.md CHANGED
@@ -2,6 +2,23 @@
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
+ <a name="3.2.0"></a>
6
+ # [3.2.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.1.0...v3.2.0) (2018-04-03)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **loader:** Allow to add new template parameters ([f7eac19](https://github.com/jantimon/html-webpack-plugin/commit/f7eac19)), closes [#915](https://github.com/jantimon/html-webpack-plugin/issues/915)
12
+ * **loader:** Use lodash inside the loader directly ([7b4eb7f](https://github.com/jantimon/html-webpack-plugin/commit/7b4eb7f)), closes [#786](https://github.com/jantimon/html-webpack-plugin/issues/786)
13
+
14
+
15
+ ### Features
16
+
17
+ * Add meta tag option ([a7d37ca](https://github.com/jantimon/html-webpack-plugin/commit/a7d37ca))
18
+ * Support node 6.9 ([74a22c4](https://github.com/jantimon/html-webpack-plugin/commit/74a22c4)), closes [#918](https://github.com/jantimon/html-webpack-plugin/issues/918)
19
+
20
+
21
+
5
22
  <a name="3.1.0"></a>
6
23
  # [3.1.0](https://github.com/jantimon/html-webpack-plugin/compare/v3.0.8...v3.1.0) (2018-03-22)
7
24
 
package/README.md CHANGED
@@ -55,6 +55,8 @@ The `html-webpack-plugin` provides [hooks](https://github.com/jantimon/html-webp
55
55
  * [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>`
56
56
  * [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.
57
57
  * [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.
58
+ * [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.
59
+
58
60
 
59
61
  <h2 align="center">Usage</h2>
60
62
 
@@ -84,7 +86,7 @@ This will generate a file `dist/index.html` containing the following
84
86
  <!DOCTYPE html>
85
87
  <html>
86
88
  <head>
87
- <meta charset="UTF-8">
89
+ <meta charset="utf-8">
88
90
  <title>Webpack App</title>
89
91
  </head>
90
92
  <body>
@@ -107,19 +109,20 @@ Allowed values are as follows
107
109
 
108
110
  |Name|Type|Default|Description|
109
111
  |:--:|:--:|:-----:|:----------|
110
- |**[`title`](#)**|`{String}`|``|The title to use for the generated HTML document|
112
+ |**[`title`](#)**|`{String}`|`Webpack App`|The title to use for the generated HTML document|
111
113
  |**[`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`)|
112
114
  |**[`template`](#)**|`{String}`|``|`webpack` require path to the template. Please see the [docs](https://github.com/jantimon/html-webpack-plugin/blob/master/docs/template-option.md) for details|
113
115
  |**[`templateParameters`](#)**|`{Boolean\|Object\|Function}`|``| Allows to overwrite the parameters used in the template |
114
116
  |**[`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|
115
117
  |**[`favicon`](#)**|`{String}`|``|Adds the given favicon path to the output HTML|
116
- |**[`minify`](#)**|`{Boolean\|Object}`|`true`|Pass [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s options as object to minify the output|
118
+ |**[`meta`](#)**|`{Object}`|`{}`|Allows to inject `meta`-tags. E.g. `meta: {viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no'}`|
119
+ |**[`minify`](#)**|`{Boolean\|Object}`|`false`|Pass [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference)'s options as object to minify the output|
117
120
  |**[`hash`](#)**|`{Boolean}`|`false`|If `true` then append a unique `webpack` compilation hash to all included scripts and CSS files. This is useful for cache busting|
118
121
  |**[`cache`](#)**|`{Boolean}`|`true`|Emit the file only if it was changed|
119
122
  |**[`showErrors`](#)**|`{Boolean}`|`true`|Errors details will be written into the HTML page|
120
123
  |**[`chunks`](#)**|`{?}`|`?`|Allows you to add only some chunks (e.g only the unit-test chunk)|
121
124
  |**[`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}`|
122
- |**[`excludeChunks`](#)**|`{String}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
125
+ |**[`excludeChunks`](#)**|`{Array.<string>}`|``|Allows you to skip some chunks (e.g don't add the unit-test chunk)|
123
126
  |**[`xhtml`](#)**|`{Boolean}`|`false`|If `true` render the `link` tags as self-closing (XHTML compliant)|
124
127
 
125
128
  Here's an example webpack config illustrating how to use these options
@@ -186,7 +189,7 @@ plugins: [
186
189
  <!DOCTYPE html>
187
190
  <html>
188
191
  <head>
189
- <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
192
+ <meta charset="utf-8"/>
190
193
  <title><%= htmlWebpackPlugin.options.title %></title>
191
194
  </head>
192
195
  <body>
@@ -201,7 +204,7 @@ Please note that this will also happen if you specifiy the html-loader and use `
201
204
  ```js
202
205
  module: {
203
206
  loaders: [
204
- { test: /\.hbs$/, loader: "handlebars" }
207
+ { test: /\.hbs$/, loader: "handlebars-loader" }
205
208
  ]
206
209
  },
207
210
  plugins: [
@@ -255,7 +258,7 @@ The following variables are available in the template:
255
258
  - `compilation`: the webpack [compilation](https://webpack.js.org/api/compilation/) object.
256
259
  This can be used, for example, to get the contents of processed assets and inline them
257
260
  directly in the page, through `compilation.assets[...].source()`
258
- (see [the inline template example](examples/inline/template.jade)).
261
+ (see [the inline template example](examples/inline/template.pug)).
259
262
 
260
263
 
261
264
  ### `Filtering Chunks`
@@ -284,41 +287,107 @@ plugins: [
284
287
 
285
288
  ### `Events`
286
289
 
287
- To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the HTML this plugin executes the following events:
290
+ To allow other [plugins](https://github.com/webpack/docs/wiki/plugins) to alter the HTML this plugin executes
291
+ [tapable](https://github.com/webpack/tapable/tree/master) hooks.
288
292
 
289
- #### `Sync`
293
+ The [lib/hooks.js](https://github.com/jantimon/html-webpack-plugin/blob/master/lib/hooks.js) contains all information
294
+ about which values are passed.
290
295
 
291
- * `html-webpack-plugin-alter-chunks`
296
+ [![Concept flow uml](https://raw.githubusercontent.com/jantimon/html-webpack-plugin/master/flow.png)](https://github.com/jantimon/html-webpack-plugin/blob/master/flow.puml)
292
297
 
293
- #### `Async`
298
+ #### `beforeAssetTagGeneration` hook
294
299
 
295
- * `html-webpack-plugin-before-html-generation`
296
- * `html-webpack-plugin-before-html-processing`
297
- * `html-webpack-plugin-alter-asset-tags`
298
- * `html-webpack-plugin-after-html-processing`
299
- * `html-webpack-plugin-after-emit`
300
+ ```
301
+ AsyncSeriesWaterfallHook<{
302
+ assets: {
303
+ publicPath: string,
304
+ js: Array<{string}>,
305
+ css: Array<{string}>,
306
+ favicon?: string | undefined,
307
+ manifest?: string | undefined
308
+ },
309
+ outputName: string,
310
+ plugin: HtmlWebpackPlugin
311
+ }>
312
+ ```
300
313
 
301
- Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
314
+ #### `alterAssetTags` hook
302
315
 
303
- **plugin.js**
304
- ```js
305
- function MyPlugin(options) {
306
- // Configure your plugin with options...
307
- }
316
+ ```
317
+ AsyncSeriesWaterfallHook<{
318
+ assetTags: {
319
+ scripts: Array<HtmlTagObject>,
320
+ styles: Array<HtmlTagObject>,
321
+ meta: Array<HtmlTagObject>,
322
+ },
323
+ outputName: string,
324
+ plugin: HtmlWebpackPlugin
325
+ }>
326
+ ```
308
327
 
309
- MyPlugin.prototype.apply = function (compiler) {
310
- compiler.plugin('compilation', (compilation) => {
311
- console.log('The compiler is starting a new compilation...');
328
+ #### `alterAssetTagGroups` hook
312
329
 
313
- compilation.plugin(
314
- 'html-webpack-plugin-before-html-processing',
315
- (data, cb) => {
316
- data.html += 'The Magic Footer'
330
+ ```
331
+ AsyncSeriesWaterfallHook<{
332
+ headTags: Array<HtmlTagObject | HtmlTagObject>,
333
+ bodyTags: Array<HtmlTagObject | HtmlTagObject>,
334
+ outputName: string,
335
+ plugin: HtmlWebpackPlugin
336
+ }>
337
+ ```
317
338
 
318
- cb(null, data)
319
- }
320
- )
321
- })
339
+ #### `afterTemplateExecution` hook
340
+
341
+ ```
342
+ AsyncSeriesWaterfallHook<{
343
+ html: string,
344
+ headTags: Array<HtmlTagObject | HtmlTagObject>,
345
+ bodyTags: Array<HtmlTagObject | HtmlTagObject>,
346
+ outputName: string,
347
+ plugin: HtmlWebpackPlugin,
348
+ }>
349
+ ```
350
+
351
+ #### `beforeEmit` hook
352
+
353
+ ```
354
+ AsyncSeriesWaterfallHook<{
355
+ html: string,
356
+ outputName: string,
357
+ plugin: HtmlWebpackPlugin,
358
+ }>
359
+ ```
360
+
361
+ #### `afterEmit` hook
362
+
363
+ ```
364
+ AsyncSeriesWaterfallHook<{
365
+ outputName: string,
366
+ plugin: HtmlWebpackPlugin
367
+ }>
368
+ ```
369
+
370
+ Example implementation: [html-webpack-harddisk-plugin](https://github.com/jantimon/html-webpack-harddisk-plugin)
371
+
372
+ **plugin.js**
373
+ ```js
374
+ class MyPlugin {
375
+ apply (compiler) {
376
+ compiler.hooks.compilation.tap('MyPlugin', (compilation) => {
377
+ console.log('The compiler is starting a new compilation...')
378
+
379
+ // Staic Plugin interface |compilation |HOOK NAME | register listener
380
+ HtmlWebpackPlugin.getHooks(compilation).beforeEmit.tapAsync(
381
+ 'MyPlugin', // <-- Set a meaningful name here for stacktraces
382
+ (data, cb) => {
383
+ // Manipulate the content
384
+ data.html += 'The Magic Footer'
385
+ // Tell webpack to move on
386
+ cb(null, data)
387
+ }
388
+ )
389
+ })
390
+ }
322
391
  }
323
392
 
324
393
  module.exports = MyPlugin
@@ -331,7 +400,7 @@ plugins: [
331
400
  ]
332
401
  ```
333
402
 
334
- Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `html-webpack-plugin-before-html-processing` event
403
+ Note that the callback must be passed the HtmlWebpackPluginData in order to pass this onto any other plugins listening on the same `beforeEmit` event
335
404
 
336
405
  <h2 align="center">Maintainers</h2>
337
406
 
@@ -383,8 +452,16 @@ This project uses the [semistandard code style](https://github.com/Flet/semistan
383
452
 
384
453
  Thank you to all our backers! 🙏 [Become a backer](https://opencollective.com/html-webpack-plugin#backer)
385
454
 
386
- <a href="https://opencollective.com/html-webpack-plugin#backers" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backers.svg?width=890"></a>
387
-
455
+ <a href="https://opencollective.com/html-webpack-plugin/backer/0/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/0/avatar.svg?requireActive=false"></a>
456
+ <a href="https://opencollective.com/html-webpack-plugin/backer/1/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/1/avatar.svg?requireActive=false"></a>
457
+ <a href="https://opencollective.com/html-webpack-plugin/backer/2/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/2/avatar.svg?requireActive=false"></a>
458
+ <a href="https://opencollective.com/html-webpack-plugin/backer/3/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/3/avatar.svg?requireActive=false"></a>
459
+ <a href="https://opencollective.com/html-webpack-plugin/backer/4/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/4/avatar.svg?requireActive=false"></a>
460
+ <a href="https://opencollective.com/html-webpack-plugin/backer/5/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/5/avatar.svg?requireActive=false"></a>
461
+ <a href="https://opencollective.com/html-webpack-plugin/backer/6/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/6/avatar.svg?requireActive=false"></a>
462
+ <a href="https://opencollective.com/html-webpack-plugin/backer/7/website?requireActive=false" target="_blank"><img src="https://opencollective.com/html-webpack-plugin/backer/7/avatar.svg?requireActive=false"></a>
463
+ <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>
464
+ <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>
388
465
 
389
466
  ## Sponsors
390
467
 
package/default_index.ejs CHANGED
@@ -1,7 +1,7 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
3
  <head>
4
- <meta charset="UTF-8">
4
+ <meta charset="utf-8">
5
5
  <title><%= htmlWebpackPlugin.options.title %></title>
6
6
  </head>
7
7
  <body>