@aller/mustachejs-loader

mustachejs-loader

A loader for webpack that uses mustache.js package.

Getting started

To begin, you'll need to install mustache and mustachejs-loader:

Yarn

$ yarn add --dev mustache mustachejs-loader

Npm

$ npm install mustache mustachejs-loader --save-dev

Webpack config

module: {
  rules: [
    {
      test: /\.mustache$/,
      loader: '@aller/mustachejs-loader'
    }
  ]
}

mustache files

{{! template.mustache }}
<h1>{{ variable }}</h1>
{{ > partial }}

{{! partial.mustache }}
<h2>{{ partialText }}</h2>

files.js

import template from 'template.mustache'

const html = template()

import template from 'template.mustache'

const html = template({ variable: "Hello world!" })

With partials

import template from 'template.mustache'
import { templateString } from 'partial.mustache'

const html = template(
  { variable: "Hello world!", partialText: "Sup?" },
  { partial: templateString }
)

Will produce the following HTML

<h1>Hello world!</h1>
<h2>Sup?</h2>

Partial loader

Webpack config

module: {
  rules: [
    {
      test: /\.mustache$/,
      loader: [
        '@aller/mustachejs-loader',
        '@aller/mustachejs-partial-loader',
      ]
    }
  ]
}

The @aller/mustachejs-partial-loader by default fetches all the files with the suffix .mustache from the ./partials directory.

To see available options for the partial loader click here