• Passing an array to the root
• Add example
• Customizing syntax for nunjucks tags
• Add a custom filters
• Refactoring

Njk HTML loader for webpack

Installation

npm install njk-html-loader

Usage

In your sources:

const html = require('./file.njk')
// => returns file.njk content as html compiled string

In your webpack.config.js file:

Using it with html-loader

njk-html-loader encode to content to a string variable to avoid it and pass the string content to the loader chain please use the following configuration:

Base config

module.exports = {
  // your config settings ...
  module: {
    rules: [{
      test: /\.njk$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          loader: 'njk-html-loader',
        },
      ],
    }],
  },
};

Options

root

Parameter to set the root template directory (String or Array):

module.exports = {
  // your config settings ...
  module: {
    rules: [{
      test: /\.njk$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          loader: 'njk-html-loader',
          options: {
            root: 'path/to/njk files',
          },
        },
      ],
    }],
  },
};

data

Object data to use for all templates in the loader (Object):

module.exports = {
  // your config settings ...
  module: {
    rules: [{
      test: /\.njk$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          loader: 'njk-html-loader',
          options: {
            data: {
              a: 'a',
              b: 'b',
            },
          },
        },
      ],
    }],
  },
};

<div>
  <div>{{ a }}</div>
  <div>{{ b }}</div>
</div> 

env.filters

Object data to use for all templates in the loader (Object):

module.exports = {
  // your config settings ...
  module: {
    rules: [{
      test: /\.njk$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          loader: 'njk-html-loader',
          options: {
            env: {
              filters: {
                shorten(value, count) {
                  return value.slice(count || 5);
                },
              },
            },
          },
        },
      ],
    }],
  },
};

{% set message = 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.' %}

{# Show the first 20 characters #}
A message for you: {{ message|shorten(20) }}

more info: https://mozilla.github.io/nunjucks/api.html#custom-filters

env.extensions

function Ext(){}
 
module.exports = {
  // your config settings ...
  module: {
    rules: [{
      test: /\.njk$/,
      use: [
        {
          loader: 'html-loader',
        },
        {
          loader: 'njk-html-loader',
          options: {
            env: {
              extensions: {
                ext: new Ext(),
              },
            },
          },
        },
      ],
    }],
  },
};

more info: https://mozilla.github.io/nunjucks/api.html#custom-tags