From 1edfaa8e42b9f2cc022a40f421b130b26bbe6796 Mon Sep 17 00:00:00 2001 From: Jan Nicklas Date: Tue, 12 May 2015 23:14:52 +0200 Subject: [PATCH] Update docs --- CHANGES.md | 5 ++-- README.md | 79 ++++++++++++++++++++++-------------------------------- 2 files changed, 35 insertions(+), 49 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index d16fd67..2afc018 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -1,9 +1,10 @@ Change History ============== -HEAD +v1.4.0 ---- -* Add `favicon.ico` and `apple-touch-icon.png` to the HTML +* Add `favicon.ico` option +* Add html minifcation v1.2.0 ------ diff --git a/README.md b/README.md index 74af037..5b002be 100644 --- a/README.md +++ b/README.md @@ -54,28 +54,6 @@ If you have any css assets in webpack's output (for example, css extracted with the [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin)) then these will be included with `` tags in the HTML head. -Icons - Favicon & Apple Touch Icon ----------------------------------- - -The plugin will automatically pick up if there is a file named `favicon.ico` -or `apple-touch-icon.png` included in the build, and automatically add them -to the HTML. - -```html - - - - - Webpack App - - - - - - - -``` - Configuration ------------- You can pass a hash of configuration options to `HtmlWebpackPlugin`. @@ -86,7 +64,8 @@ Allowed values are as follows: You can specify a subdirectory here too (eg: `assets/admin.html`). - `template`: A html template (supports [blueimp templates](https://github.com/blueimp/JavaScript-Templates)). - `templateContent`: A html string or a function returning the html (supports [blueimp templates](https://github.com/blueimp/JavaScript-Templates)). -- `inject`: Inject all assets into the given `template` or `templateContent`. +- `inject`: Inject all assets into the given `template` or `templateContent`. +- `favicon`: Adds the given favicon path to the output html. - `minify`: Set to true or pass a [html-minifier](https://github.com/kangax/html-minifier#options-quick-reference) options object to minify the output. - `hash`: if `true` then append a unique webpack compilation hash to all included scripts and css files. This is useful for cache busting. @@ -133,58 +112,64 @@ once in your plugins array: Writing Your Own Templates -------------------------- If the default generated HTML doesn't meet your needs you can supply -your own [blueimp template](https://github.com/blueimp/JavaScript-Templates). -The [default template](https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_index.html) -is a good starting point for writing your own. +your own template. The easiest way is to use the `inject` option and pass a custom html file. +The html-webpack-plugin will automatically inject all necessary css, js, manifest +and favicon files into the markup. + +```javascript +plugins: [ + new HtmlWebpackPlugin({ + inject: true, + template: 'my-index.html' + }) +] +``` -Let's say for example you wanted to put a webpack bundle into the head of your -HTML as well as the body. Your template might look like this: ```html My App - - ``` -To use this template, configure the plugin like this: -```javascript -{ - entry: 'index.js', - output: { - path: 'dist', - filename: 'index_bundle.js' - }, - plugins: [ - new HtmlWebpackPlugin({ - template: 'src/assets/my_template.html' - }) - ] -} -``` - Alternatively, if you already have your template's content in a String, you can pass it to the plugin using the `templateContent` option: ```javascript plugins: [ new HtmlWebpackPlugin({ + inject: true, templateContent: templateContentString }) ] ``` +You can use the [blueimp template](https://github.com/blueimp/JavaScript-Templates) syntax out of the box. +If the `inject` feature doesn't fit your needs and you want full control over the asset placement use the [default template](https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_index.html) +as a starting point for writing your own. + The `templateContent` option can also be a function to use another template language like jade: ```javascript plugins: [ new HtmlWebpackPlugin({ - templateContent: function(templateParams, webpackCompiler) { + templateContent: function(templateParams, compilation) { // Return your template content synchronously here + return '..'; + } + }) +] +``` +Or the async version: +```javascript +plugins: [ + new HtmlWebpackPlugin({ + templateContent: function(templateParams, compilation, callback) { + // Return your template content synchronously here + callback(null, '..'); } }) ]