Hello {{name}}
\n```\n\n```javascript\n// File: app.js\nvar compiled = require('./hello.hbs');\nreturn compiled({name: \"world\"});\n```\n\n# Using helpers #\n\n```javascript\n// File: helpers.js\n\n// Get Handlebars instance\nvar Handlebars = require('handlebars-template-loader/runtime');\n\nHandlebars.registerHelper('list', function(items, options) {\n var out = \"![](\"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 the `attributes` option as an empty array.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.hbs$/,\n loader: \"handlebars-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 test: /\\.hbs$/,\n loader: \"handlebars-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/{{doge}}.png\")
\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: \"handlebars-template-loader\",\n query: {\n root: \"myapp\",\n parseDynamicRoutes: true\n }\n }\n ]\n }\n};\n```\n\n```html\n\n![](\"/img/cat-<%-)
.png\" class=\"doge-img\">\n```\n\n## Runtime path ##\n\nIf you have a custom location for your Handlebars runtime module then you can set that in your `query` object via the `runtimePath` property. This is the path to the Handlebars runtime that every `.hbs` file will require and use. By default this loader looks up the absolute path to the `handlebars/runtime` in your `node_modules` folder. Changing this property is useful if you are doing somethign non-standard with your Handlebar templates, for example setting an alias for the `handlebars/runtime` path.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.html$/,\n loader: \"handlebars-template-loader\",\n query: {\n runtimePath: 'handlebars/runtime'\n }\n }\n ]\n }\n};\n```\n\n## Compilation options ##\n\nHandlebars does support [additional compilation options](http://handlebarsjs.com/reference.html) that you can specify in your `query` object literal.\n\n```javascript\nmodule.exports = {\n //...\n\n module: {\n loaders: [\n {\n test: /\\.html$/,\n loader: \"handlebars-template-loader\",\n query: {\n root: \"myapp\",\n strict: true,\n noEscape: true\n }\n }\n ]\n }\n};\n```\n\n# Macros #\n\nMacros allow additional features like including templates or inserting custom text in a compiled templates.\n\n## require ##\n\nThe `require` macro expects a path to a handlebars template. The macro is then translated to a webpack require expression that evaluates the template using the same arguments.\n\n```html\nLorem ipsum
\n@repeat('Sit amet
\n@repeat('\\n')\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\nmodule.exports = {\n // ...\n\n module: {\n loaders: {\n // ...\n { test: /\\.hbs/, loader: \"handlebars-template-loader\" },\n }\n },\n\n macros: {\n copyright: function () {\n return \"'Copyright FakeCorp 2014 - 2015
'\";\n }\n }\n}\n```\n\nWe then invoke our 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: /\\.hbs/,\n loader: \"handlebars-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. Only boolean, strings and numeric types are supported.\n\n```javascript\n// File: webpack.config.js\nmodule.exports = {\n // ...\n\n module: {\n loaders: {\n // ...\n { test: /\\.html$/, loader: \"handlebars-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@repeat('