Hello <%=name%>
\n```\n\n```javascript\nvar compiled = require('./hello.html');\nreturn compiled({name: \"world\"});\n```\n\n#### Prepending filename comment\n\nWhen 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. ``).\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n prependFilenameComment: __dirname,\n }\n }\n ]\n }\n};\n```\n\n#### Template settings\n\nYou can override the delimiters used to determine data to injected (HTML-escaped or not) or code to evaluate in the templates.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n //...\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n interpolate: '\\\\{\\\\[(.+?)\\\\]\\\\}',\n evaluate: '\\\\{%([\\\\s\\\\S]+?)%\\\\}',\n escape: '\\\\{\\\\{(.+?)\\\\}\\\\}'\n }\n }\n ]\n }\n};\n```\n\n#### Template imports\n\n[`_.templateSettings.imports`](https://lodash.com/docs#templateSettings-imports) automatically includes variables or functions in your templates. This is useful when you have utility functions that you want to make available to all templates without explicitly passing them in every time the template is used.\n\n```html\n\n<%= greet(name) %>
\n```\n\n```javascript\nvar _ = require('lodash');\n// Imports must be defined before the template is required\n_.templateSettings.imports = {\n greet: function(name) {\n return 'Hello, ' + name + '!';\n },\n};\nvar compiled = require('./hello.html');\nreturn compiled({name: \"world\"});\n```\n\nThis is enabled by default when `lodash` is the engine used, but can be explicitly toggled using `withImports` option.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n //...\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n withImports: true,\n }\n }\n ]\n }\n};\n```\n\n#### Images\n\nIn order to load images you must install either the *file-loader* or the *url-loader* package.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n { test: /\\.html$/, loader: \"underscore-template-loader\" },\n { test: /\\.jpg$/, loader: \"file-loader\" },\n { test: /\\.png$/, loader: \"url-loader?mimetype=image/png\" },\n ]\n }\n};\n```\n\n```html\n\n![](\"img/portrait.jpg\")
\n\n\n![](\"img/icon.png\"){kind=icon}
\n```\n\nImages with an absolute path are not translated unless a `root` option is defined\n\n```html\n\n![](\"/not_translated.jpg\"){kind=spacer}
\n\n\n![](\"/image.jpg\")
\n```\n\nIn order to deactivate image processing define `attributes` as an empty array.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n attributes: []\n }\n }\n ]\n }\n};\n```\n\nYou could also add which attributes need to be processed in the form of pairs *tag:attribute*.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n //...\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n attributes: ['img:src', 'x-img:src']\n }\n }\n ]\n }\n};\n```\n\nDynamic attributes won't be afected by this behaviour by default.\n\n```html\n\n![](\"/img/cat-<%-)
.png\" class=\"cat-img\">\n```\n\nIn order to append the root directory you'll need to specify the `parseDynamicRoutes` argument.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n root: \"myapp\",\n parseDynamicRoutes: true\n }\n }\n ]\n }\n};\n```\n\n```html\n\n.png\" class=\"cat-img\">\n```\n\n### Macros\n\nMacros allow additional features like including templates or inserting custom text in compiled templates.\n\n#### The *require* macro\n\nThe `require` macro expects a path to a underscore template. The macro is then translated into a webpack require expression that evaluates the template using the same arguments.\n\n```html\nLorem ipsum
\n@br(3)\nSit amet
\n@nl()\n```\n\n#### Custom macros\n\nWe can include additional macros by defining them in the webpack configuration file. Remember that the value returned by a macro is inserted as plain javascript, so in order to insert a custom text we need to use nested quotes. For example, let's say that we want a macro that includes a copyright string in our template.\n\n```javascript\n// File: webpack.config.js\nconst webpack = require('webpack');\n\nmodule.exports = {\n // ...\n\n module: {\n loaders: {\n // ...\n { test: /\\.html$/, loader: \"underscore-template-loader\" },\n }\n },\n\n plugins: [\n // ...\n new webpack.LoaderOptionsPlugin({\n options: {\n macros: {\n copyright: function () {\n return \"'Copyright FakeCorp 2014 - 2018
'\";\n },\n },\n },\n }),\n ],\n}\n```\n\nWe then invoke this macro from within the template as usual.\n\n```html\n\n```\n\n#### Disabling macros\n\nYou can disable macros if you are a bit unsure about their usage or just simply want faster processing. This is achieved by setting the `parseMacros` options to false.\n\n```javascript\nmodule.exports = {\n // ...\n\n module: {\n loaders: {\n // ...\n {\n test: /\\.html$/,\n loader: \"underscore-template-loader\",\n query: {\n parseMacros: false\n }\n },\n }\n }\n}\n```\n\n#### Arguments\n\nMacros can accept an arbitrary number of arguments of different types: boolean, strings, numbers an object literals are supported.\n\n```javascript\n// File: webpack.config.js\nmodule.exports = {\n // ...\n\n module: {\n loaders: {\n // ...\n { test: /\\.html$/, loader: \"underscore-template-loader\" },\n }\n },\n\n macros: {\n header: function (size, content) {\n return \"'Lorem ipsum
\n@header(3, 'Contents')\nSit amet
\n```\n\n#### Escaping\n\nMacro expressions can be escaped with the `\\` character.\n\n```html\n@br(3)\n\\@nl()\n@br()\n```\n\nTranslates to\n\n```html\n