This is a playground
to test code. It runs a full Node.js
environment and already has all of npm
’s 400,000 packages pre-installed, including handlebars-loader
with all npm
packages installed. Try it out:
require()
any package directly from npmawait
any promise instead of using callbacks (example)This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
A handlebars template loader for webpack.
Handlebars 4 now supported
npm i handlebars-loader --save
{
...
module: {
rules: [
...
{ test: /\.handlebars$/, loader: "handlebars-loader" }
]
}
}
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
../
. 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)
}
}
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)