From 84ea653bfb5ea63bc347dc0ff596ad3e9e91c0f8 Mon Sep 17 00:00:00 2001 From: Kees Kluskens Date: Sun, 20 Sep 2015 18:07:32 +0200 Subject: [PATCH] Add example usage of loaders in README. --- README.md | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 56cf127..58a67a9 100644 --- a/README.md +++ b/README.md @@ -4,8 +4,8 @@ HTML Webpack Plugin This is a [webpack](http://webpack.github.io/) plugin that simplifies creation of HTML files to serve your webpack bundles. This is especially useful for webpack bundles that include -a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you or supply -your own template (using lodash/ejs templates. +a hash in the filename which changes every compilation. You can either let the plugin generate an HTML file for you, supply +your own template using lodash templates or use your own loader. Installation ------------ @@ -14,7 +14,6 @@ Install the plugin with npm: $ npm install html-webpack-plugin@2 --save-dev ``` - Basic Usage ----------- @@ -142,6 +141,23 @@ plugins: [ ``` +If you already have a template loader, you can use it to parse the template. + +```javascript +module: { + loaders: [ + { test: /\.hbs$/, loader: "handlebars" } + ] +}, +plugins: [ + new HtmlWebpackPlugin({ + title: 'Custom template using Handlebars', + template: 'my-index.hbs', + inject: 'body' + }) +] +``` + Alternatively, if you already have your template's content in a String, you can pass it to the plugin using the `templateContent` option: ```javascript @@ -153,7 +169,7 @@ plugins: [ ] ``` -You can use the lodash/ejs syntax out of the box. +You can use the lodash 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.