Repository files navigation

Ahandlebars template loader forwebpack.

Handlebars 4 now supported

npm i handlebars-loader --save

{  ...module:{rules:[      ...{test:/\.handlebars$/,loader:"handlebars-loader"}]}}

vartemplate=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 therootRelative 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:

• 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). Seeexample
• 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.Note: For this to work, you'll have to disable theesModule Option in the corresponding file-loader entry in your webpack config.
• 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 Thoraxhelpers.
• exclude: Defines a regex that will exclude paths from resolving. This can be used to prevent helpers from being resolved to modules in thenode_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. Seeexample
• ignorePartials: Prevents partial references from being fetched and bundled. Useful for manually loading partials at runtime.
• ignoreHelpers: Prevents helper references from being fetched and bundled. Useful for manually loading helpers at runtime.
• precompileOptions: Options passed to handlebars precompile. See the Handlebars.jsdocumentation for more information.
• config: Tells the loader where to look in the webpack config for configurations for this loader. Defaults tohandlebarsLoader.
• 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 the callback. Callback accepts (err, locationOnDisk)}}

• config.helperResolver You can specify a function to use for resolving helpers. To do so, add to your webpack config: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 } }Seewebpack documentation for more information regarding loaders.

See theexamples folder in this repo. The examples are fully runnable and demonstrate a number of concepts (using partials and helpers) -- just runwebpack in that directory to producedist/bundle.js in the same folder, open index.html.

See theCHANGELOG.md file.

MIT (http://www.opensource.org/licenses/mit-license)