A handlebars template loader for webpack.
Handlebars 4 now supported
npm i handlebars-loader --save
{ ... module: { rules: [ ... { test: /\.handlebars$/, loader: "handlebars-loader" } ] } }Your JS making use of the templates
var template = require("./file.handlebars"); // => returns file.handlebars content as a template function
The loader resolves partials and helpers automatically. They are looked up relative to the current directory (this can be modified with the rootRelative
option) or as a module if you prefix with $
.
A file "/folder/file.handlebars". {{> partial}} will reference "/folder/partial.handlebars". {{> ../partial}} will reference "/partial.handlebars". {{> $module/partial}} will reference "/folder/node_modules/module/partial.handlebars". {{helper}} will reference the helper "/folder/helper.js" if this file exists. {{[nested/helper] 'helper parameter'}} will reference the helper "/folder/nested/helper.js" if this file exists, passes 'helper parameter' as first parameter to helper. {{../helper}} {{$module/helper}} are resolved similarly to partials.
The following query (or config) options are supported:
handlebars/runtime
.esModule
Option in the corresponding file-loader entry in your webpack config../
. Setting this to be empty effectively turns off automatically resolving relative handlebars resources for items like {{helper}}
. {{./helper}}
will still resolve as expected.node_modules
directory.handlebarsLoader
.handlebarsLoader: { partialResolver: function(partial, callback){ // should pass the partial's path on disk // to the callback. Callback accepts (err, locationOnDisk) } }
js handlebarsLoader: { helperResolver: function(helper, callback){ // should pass the helper's path on disk // to the callback if one was found for the given parameter. // Callback accepts (err, locationOnDisk) // Otherwise just call the callback without any arguments } }
See webpack
documentation for more information regarding loaders.See the examples folder in this repo. The examples are fully runnable and demonstrate a number of concepts (using partials and helpers) -- just run webpack
in that directory to produce dist/bundle.js
in the same folder, open index.html.
See the CHANGELOG.md file.
MIT (http://www.opensource.org/licenses/mit-license)
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4