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 $
.
The following query (or config) options are supported:
- helperDirs: Defines additional directories to be searched for helpers. Allows helpers to be defined in a directory and used globally without relative paths. You must surround helpers in subdirectories with brackets (Handlerbar helper identifiers can't have forward slashes without this). See example
- runtime: Specify the path to the handlebars runtime library. Defaults to look under the local handlebars npm module, i.e.
handlebars/runtime
. - extensions: Searches for templates with alternate extensions. Defaults are .handlebars, .hbs, and '' (no extension).
- inlineRequires: Defines a regex that identifies strings within helper/partial parameters that should be replaced by inline require statements.
- rootRelative: When automatically resolving partials and helpers, use an implied root path if none is present. Default =
./
. Setting this to be empty effectively turns off automatically resolving relative handlebars resources for items like{{helper}}
.{{./helper}}
will still resolve as expected. - knownHelpers: Array of helpers that are registered at runtime and should not explicitly be required by webpack. This helps with interoperability for libraries like Thorax helpers.
- exclude: Defines a regex that will exclude paths from resolving. This can be used to prevent helpers from being resolved to modules in the
node_modules
directory. - debug: Shows trace information to help debug issues (e.g. resolution of helpers).
- partialDirs: Defines additional directories to be searched for partials. Allows partials to be defined in a directory and used globally without relative paths. See example
- preventIndent: Prevent partials from being indented inside their parent template.
- ignorePartials: Prevents partial references from being fetched and bundled. Useful for manually loading partials at runtime
- compat: Enables recursive field lookup for Mustache compatibility. See the Handlebars.js documentation for more information.
- config: Tells the loader where to look in the webpack config for configurations for this loader. Defaults to
handlebarsLoader
. - config.partialResolver You can specify a function to use for resolving partials. To do so, add to your webpack config:
handlebarsLoader: { partialResolver: function(partial, callback){ // should pass the partial's path on disk to // to the callback. Callback accepts (err, locationOnDisk) } }
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.