html-webpack-plugin
Advanced tools
Comparing version 4.1.0 to 4.2.0
@@ -5,2 +5,11 @@ # Change Log | ||
| # [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) | ||
@@ -7,0 +16,0 @@ |
10
index.js
@@ -21,3 +21,3 @@ // @ts-check | ||
| const { createHtmlTagObject, htmlTagObjectToString } = require('./lib/html-tags'); | ||
| const { createHtmlTagObject, htmlTagObjectToString, HtmlTagArray } = require('./lib/html-tags'); | ||
@@ -826,3 +826,3 @@ const prettyError = require('./lib/errors.js'); | ||
| const xhtml = this.options.xhtml; | ||
| const preparedTags = assetTagGroup.map((assetTag) => { | ||
| return HtmlTagArray.from(assetTagGroup.map((assetTag) => { | ||
| const copiedAssetTag = Object.assign({}, assetTag); | ||
@@ -833,7 +833,3 @@ copiedAssetTag.toString = function () { | ||
| return copiedAssetTag; | ||
| }); | ||
| preparedTags.toString = function () { | ||
| return this.join(''); | ||
| }; | ||
| return preparedTags; | ||
| })); | ||
| } | ||
@@ -840,0 +836,0 @@ |
@@ -68,5 +68,29 @@ // @ts-check | ||
| /** | ||
| * The `HtmlTagArray Array with a custom `.toString()` method. | ||
| * | ||
| * This allows the following: | ||
| * ``` | ||
| * const tags = HtmlTagArray.from([tag1, tag2]); | ||
| * const scriptTags = tags.filter((tag) => tag.tagName === 'script'); | ||
| * const html = scriptTags.toString(); | ||
| * ``` | ||
| * | ||
| * Or inside a string literal: | ||
| * ``` | ||
| * const tags = HtmlTagArray.from([tag1, tag2]); | ||
| * const html = `<html><body>${tags.filter((tag) => tag.tagName === 'script')}</body></html>`; | ||
| * ``` | ||
| * | ||
| */ | ||
| class HtmlTagArray extends Array { | ||
| toString () { | ||
| return this.join(''); | ||
| } | ||
| } | ||
| module.exports = { | ||
| HtmlTagArray: HtmlTagArray, | ||
| createHtmlTagObject: createHtmlTagObject, | ||
| htmlTagObjectToString: htmlTagObjectToString | ||
| }; |
| { | ||
| "name": "html-webpack-plugin", | ||
| "version": "4.1.0", | ||
| "version": "4.2.0", | ||
| "license": "MIT", | ||
@@ -5,0 +5,0 @@ "description": "Simplifies creation of HTML files to serve your webpack bundles", |
@@ -137,2 +137,3 @@ [![npm][npm]][npm-url] | ||
| |**`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) | | ||
@@ -247,27 +248,32 @@ |**`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)| | ||
| 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": [] | ||
| }, | ||
| } | ||
| } | ||
| } | ||
| - `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. | ||
| - `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; | ||
| ``` | ||
| If you've set a publicPath in your webpack config this will be reflected | ||
| correctly in this assets hash. | ||
@@ -278,7 +284,2 @@ - `htmlWebpackPlugin.options`: the options hash that was passed to | ||
| - `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. | ||
| - `webpackConfig`: the webpack configuration that was used for this compilation. This | ||
@@ -293,2 +294,39 @@ can be used, for example, to get the `publicPath` (`webpackConfig.output.publicPath`). | ||
| 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 | ||
@@ -295,0 +333,0 @@ |
@@ -112,2 +112,3 @@ import { AsyncSeriesWaterfallHook } from "tapable"; | ||
| | string | ||
| | ((templateParameters: { [option: string]: any }) => (string | Promise<string>)) | ||
| | Promise<string>; | ||
@@ -114,0 +115,0 @@ /** |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.36%
138685
- Lines of code
- increased by0.93%
2168
- Number of lines in readme file
- increased by6.09%
662
No dependency changes