wontache-loader

Webpack loader for bundling Mustache templates with the Wontache engine

Supports webpack versions 4 and 5.

Quickstart

Your template (hello.mustache):

Hello, {{name}}!

Your code, which uses the template (index.js):

import hello from './hello.mustache';
console.log(hello({name: 'World'}));

Your webpack.config.js:

module.exports = {
    module: {
        rules: [
            {test: /\.mustache$/, use: 'wontache-loader'}
        ]
    }
};

Options

                use: [{
                    loader: 'wontache-loader',
                    options: {
                        type: 'ESM',
                        precompile: false,
                        delimiters: ['{{', '}}'],
                        wontache: 'mustache',
                    }
                }]

type

String with module type — Default: 'ESM'

Which type of module to output. Valid values are 'ESM', 'AMD' and 'CommonJS'.

precompile

Boolean — Default: false

This option only controls an optimization. The transformed module will always export a compiled, ready-to-run template function, regardless of whether you pass true or false.

If false, the compilation happens during initial loading of the transformed module. If true, the compilation already happens while webpack is performing the transform, so the transformed module does not need to perform this work anymore.

The optimization is off by default, because it also has a cost: the precompiled version of a template is always larger than the original template text. Leave it off to keep your bundle as small as possible. Try switching it on when you find that there is too much delay during initial loading of the bundle. If you are publishing a library that includes bundled templates, consider giving your users a choice between bundles with and without precompilation.

If you want the transformed module to export the template as a string, instead of as an already compiled function, use raw-loader instead.

delimiters

Array of exactly two nonempty strings — Default: ['{{', '}}']

Override this to change the delimiters with which your templates will be parsed initially, until encountering Set Delimiter tags.

Your template with alternative delimiters:

Hello, [name]!

Your override in webpack.config.js:

                use: [{
                    loader: 'wontache-loader',
                    options: {
                        delimiters: ['[', ']']
                    }
                }]

wontache

String with valid JavaScript variable name — Default: 'mustache'

The transformed module imports the Mustache engine from Wontache. The wontache option lets you override the name by which it is imported.

Transformed module, as the loader outputs it by default:

import mustache from 'wontache';
export default mustache(...);

Your override in webpack.config.js:

                use: [{
                    loader: 'wontache-loader',
                    options: {
                        wontache: 'sideburns',
                    }
                }]

Alternative transformed module:

import sideburns from 'wontache';
export default sideburns(...);