diff --git a/README.md b/README.md index b89b76f..64d3b21 100644 --- a/README.md +++ b/README.md @@ -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 @@ -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 + + + + + My App + + + + + + +``` + +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()`.