underscore-template-loader

underscore-template-loader

An Underscore.js template loader for Webpack

###Installation
```bash $ npm install underscore-template-loader ```
###Usage
```javascript module.exports = { //... loaders: [ //... { test: /\.html$/, loader: "underscore-template-loader" } ] }; ```
####Loading templates
```html

Hello <%=name%>

```

var compiled = require('./hello.html');
return compiled({name: "world"});

####Template settings
```javascript module.exports = { //... loaders: [ //... { test: /\.html$/, loader: "underscore-template-loader", query: { interpolate : '\\{\\[(.+?)\\]\\}', evaluate: '\\{%([\\s\\S]+?)%\\}', escape : '\\{\\{(.+?)\\}\\}' } } ] }; ```
####Include tag
```html

Hello, <@include message.html>

```

<!-- file: message.html -->
<em>how are you?</em>

Include tag can be overrided through the *includeRegex* argument.
```javascript module.exports = { //... loaders: [ //... { test: /\.html$/, loader: "underscore-template-loader", query: { includeRegex: '<#include\\s+([\\/\\w\\.]*?[\\w]+\\.[\\w]+)>' } } ] }; ```
####Images
In order to load images you must install either the *file-loader* or the *url-loader* packages.

module.exports = {
    //...
    loaders: [
        //...
        { test: /\.html/, loader: "underscore-template-loader" },
        { test: /\.jpg$/, loader: "file-loader" },
        { test: /\.png$/, loader: "url-loader?mimetype=image/png" },
    ]
};

<!-- Require image using file-loader -->
<img src="img/portrait.jpg">

<!-- Require image using url-loader -->
<img src="img/icon.png">

Images with an absolute path are not translated unless a *root* argument is defined

<!-- Using root = undefined => no translation -->
<img src="/not_translated.jpg">

<!-- Using root = 'images' => require('images/image.jpg') -->
<img src="/image.jpg">

In order to deactivate image processing define *attributes* as an empty array.

module.exports = {
    //...
    loaders: [
        //...
        {
            test: /\.html$/,
            loader: "underscore-template-loader",
            query: {
                attributes: []
            }
        }
    ]
};

You could also add which attributes need to be processed in the form of pairs tag:attribute.

module.exports = {
    //...
    loaders: [
        //...
        {
            test: /\.html$/,
            loader: "underscore-template-loader",
            query: {
                attributes: ['img:src', 'x-img:src']
            }
        }
    ]
};

####Known issues
* Trying to use different template settings (interpolate, escape, evaluate) for different extensions. Underscore template settings are defined globally.
###License

Released under the MIT license.