Awesome
Mustache loader for webpack
Compiles Mustache templates with Hogan and optionally html-minifier.
Install
$ npm i -S mustache-loader
Usage
module: {
loaders: [ {
test: /\.html$/,
loader: 'mustache'
// loader: 'mustache?minify'
// loader: 'mustache?{ minify: { removeComments: false } }'
// loader: 'mustache?noShortcut'
} ]
}
module: {
rules: [ {
test: /\.html$/,
loader: 'mustache-loader'
// loader: 'mustache-loader?minify'
// loader: 'mustache-loader?{ minify: { removeComments: false } }'
// loader: 'mustache-loader?noShortcut'
} ]
}
var template = require('./template.html');
var html = template({ foo: 'bar' });
If noShortcut
is passed, then Hogan compiled template is returned instead, so
you can pass it as partial.
var template = require('./template.html');
var template2 = require('./template2.html');
var html = template.render({ foo: 'bar' }, {partial: template2});
If clientSide
is passed in, then Hogan will not pre-compile the template.
If tiny
is passed in, the source of the template will not be emitted, creating a smaller output.
if render
is passed in, the data is sent is used to immediately render the template. Render may be an object or a function which returns an object (in order to allow the data to change over time, e.g. to support hot reloading).
For example, the following will render index.mustache
with the provided data (title
), which can immediately be used by HtmlWebpackPlugin.
module: {
rules: [ {
test: /index\.mustache$/,
loader: 'mustache-loader',
options: {
tiny: true,
render: {
title: 'hello world',
},
},
} ]
}
plugins: [
new HtmlWebpackPlugin({
template: 'index.mustache',
inject: 'body',
}),
]
If another loader is chained after Mustache-Loader then the minify
, clientSide
, and tiny
options will be ignored.
Any additional Hogan parameters passed into this loader will be passed through to Hogan.