Update docs
This commit is contained in:
Jan Nicklas
parent
5043ac0712
commit
1edfaa8e42
|
|
@ -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
|
||||
------
|
||||
|
|
|
|||
79
README.md
79
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 `<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
|
||||
-------------
|
||||
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
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
|
||||
<title>My App</title>
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks.head.entry%}"></script>
|
||||
</head>
|
||||
<body>
|
||||
<script src="{%=o.htmlWebpackPlugin.files.chunks.main.entry%}"></script>
|
||||
</body>
|
||||
</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
|
||||
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, '..');
|
||||
}
|
||||
})
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue