njk-html-loader

• 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>