underscore-template-loader

underscore-template-loader

An Underscore.js and Lodash template loader for Webpack

###Installation
```bash $ npm install underscore-template-loader ```

Make sure you have the underscore or lodash package installed.

###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"});

####Prepending filename comment When debugging a large single page app with the DevTools, it's often hard to find the template that contains a bug. With the following config a HTML comment is prepended to the template with the relative path in it (e.g. ``).

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

####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/Lodash template settings are defined globally. * Attributes not parsed on included templates (needs fix).
###License

Released under the MIT license.