TouchInstinct
/
html-webpack-plugin
301
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update docs

This commit is contained in:
Jan Nicklas 2015-05-12 23:14:52 +02:00
parent 5043ac0712
commit 1edfaa8e42
2 changed files with 35 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
CHANGES.md
View File

@ -1,9 +1,10 @@
Change History 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 v1.2.0
------ ------

79
README.md
View File

@ -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)) with the [ExtractTextPlugin](https://github.com/webpack/extract-text-webpack-plugin))
then these will be included with `<link>` tags in the HTML head. then these will be included with `<link>` 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link rel="shortcut icon" href="0a31c912c8b55c756f7a969982b1ff91.ico">
<link rel="apple-touch-icon" href="2805113e07a3cf668e68442009c97e93.png">
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>
```
Configuration Configuration
------------- -------------
You can pass a hash of configuration options to `HtmlWebpackPlugin`. 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`). You can specify a subdirectory here too (eg: `assets/admin.html`).
- `template`: A html template (supports [blueimp templates](https://github.com/blueimp/JavaScript-Templates)). - `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)). - `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. - `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 - `hash`: if `true` then append a unique webpack compilation hash to all
included scripts and css files. This is useful for cache busting. included scripts and css files. This is useful for cache busting.
@ -133,58 +112,64 @@ once in your plugins array:
Writing Your Own Templates Writing Your Own Templates
-------------------------- --------------------------
If the default generated HTML doesn't meet your needs you can supply If the default generated HTML doesn't meet your needs you can supply
your own [blueimp template](https://github.com/blueimp/JavaScript-Templates). your own template. The easiest way is to use the `inject` option and pass a custom html file.
The [default template](https://github.com/ampedandwired/html-webpack-plugin/blob/master/default_index.html) The html-webpack-plugin will automatically inject all necessary css, js, manifest
is a good starting point for writing your own. 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 ```html
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>My App</title> <title>My App</title>
<script src="{%=o.htmlWebpackPlugin.files.chunks.head.entry%}"></script>
</head> </head>
<body> <body>
<script src="{%=o.htmlWebpackPlugin.files.chunks.main.entry%}"></script>
</body> </body>
</html> </html>
``` ```
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 Alternatively, if you already have your template's content in a String, you
can pass it to the plugin using the `templateContent` option: can pass it to the plugin using the `templateContent` option:
```javascript ```javascript
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
inject: true,
templateContent: templateContentString 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: The `templateContent` option can also be a function to use another template language like jade:
```javascript ```javascript
plugins: [ plugins: [
new HtmlWebpackPlugin({ new HtmlWebpackPlugin({
templateContent: function(templateParams, webpackCompiler) { templateContent: function(templateParams, compilation) {
// Return your template content synchronously here // 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, '..');
} }
}) })
] ]