Skip to content
art-template loader for webpack
JavaScript HTML
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example art-template@4.10.0 Jun 5, 2017
src
test
.eslintrc.json
.gitignore
LICENSE
README.md
package.json

README.md

art-template-loader

NPM Version Node.js Version

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

debug

Options

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

You can’t perform that action at this time.