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

Update readme

This commit is contained in:
Charles Blaxland 2014-08-13 13:49:35 +10:00
parent ef96f87a20
commit 07c60a5ae1
1 changed files with 63 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
README.md
View File

@ -18,9 +18,9 @@ Basic Usage
-----------
The plugin will generate an HTML5 file for you that includes all your webpack
bundles in the body.
bundles in the body using `script` tags. Just add the plugin to your webpack
config as follows:
For example, this webpack config...
```javascript
var HtmlWebpackPlugin = require('html-webpack-plugin')
var webpackConfig = {
@ -33,7 +33,7 @@ var webpackConfig = {
}
```
generates a file `dist/index.html` containing the following:
This will generate a file `dist/index.html` containing the following:
```html
<!DOCTYPE html>
<html>
@ -76,4 +76,63 @@ Here's an example webpack config illustrating how to use these options:
Writing Your Own Templates
--------------------------
TODO
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.
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.assets.head%}"></script>
</head>
<body>
<script src="{%=o.htmlWebpackPlugin.assets.main%}"></script>
</body>
</html>
```
To use this template, simply 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'
})
]
}
```
The `o` variable in the template is the data that is passed in when the
template is rendered. This variable has the following attributes:
- `htmlWebpackPlugin`: data specific to this plugin
- `htmlWebpackPlugin.assets`: 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": {
"assets": {
"head": "assets/head_bundle.js",
"main": "assets/main_bundle.js"
}
}
```
If you've set a publicPath in your webpack config this will be reflected
correctly in this assets hash.
- `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.
- `webpack`: holds the webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats)
object, as returned by `stats.toJson()`.