art-template-loader

art-template-loader

art-template loader for webpack

Install

npm install art-template
npm install art-template-loader --save-dev

Usage

By default every local <img src="image.png"> is required (require('./image.png')). You may need to specify loaders for images in your configuration (recommended file-loader or url-loader).

You can specify which attribute combination should be processed by this loader via the query parameter htmlResourceRules. (Default: htmlResourceRules=[/\bsrc="([^"]*)"/])

To completely disable tag-attribute processing (for instance, if you're handling image loading on the client side) you can pass in htmlResourceRules=false.

Examples

module.exports = {
    // ...
    module: {
        rules: [{
            test: /\.jpg$/,
            loader: "file-loader"
        }, {
            test: /\.png$/,
            loader: "url-loader?mimetype=image/png"
        }, {
            test: /\.art$/,
            loader: "art-template-loader",
            options: {
                // art-template options (if necessary)
                // @see https://github.com/aui/art-template
            }
        }]
    },
    // ...
}

<% include('./header.art') %>

<% if (user) { %>
  <h2><%= user.name %></h2>
  <p><img src="./octocat.png" alt="octocat"></p>
<% } %>

<% include('./footer.art') %>

More

'Root-relative' URLs

For urls that start with a /, the default behavior is to not translate them. If a htmlResourceRoot query parameter is set, however, it will be prepended to the url and then translated.

With the same configuration as above:

<!-- file.art -->
<img src="/image.jpg">

require("html-loader!./file.art");

// => '<img  src="/image.jpg">'

require("html-loader?htmlResourceRoot=.!./file.art");

// => '<img  src="http://cdn.example.com/49eba9f/a992ca.jpg">'

Filter

Add filter:

var runtime = require('art-template/lib/runtime');
runtime.dateFormat = function(){ /*[...]*/ };
var html = require('./index.art');

Use filter:

{{time | dateFormat 'yyyy-MM-dd hh:mm:ss'}}

Debug

Support SourceMap:

webpack --debug

Options

You can pass art-template options using standard webpack loader options.