Using with html-webpack-plugin

For using with html-webpack-plugin just add it to plugins array, all options from it would be available as htmlWebpackPlugin.options in Nunjucks template.

webpack.config.js

const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    module: {
        rules: [
            {
                test: /\.njk$/,
                use: [
                    {
                        loader: 'simple-nunjucks-loader',
                        options: {}
                    }
                ]
            }
        ]
    },
    
    plugins: [
        new HTMLWebpackPlugin({
            template: 'template.njk',
            templateParameters: {
                username: 'Joe'
            }
        })
    ]
};

template.njk

<p>Hello, {{ username }}!</p>

Refer to html-webpack-plugin page for all available options.

Multiple HTML files generation

To render multiple files from project, you should add multiple instances of html-webpack-plugin. Next example use glob package to traverse all .njk files (except the one that starts from _), and create plugin instance for it. You can use any other way to traverse directories.

webpack.config.js

const glob = require('glob');
const HTMLWebpackPlugin = require('html-webpack-plugin');

function getTemplates() {
  return new Promise(function(resolve, reject) {
    glob('**/!(_*).njk', function(error, files) {
      if (error) {
        return reject(error);
      }

      resolve(files);
    });
  });
}

function toPlugin(fileName) {
  return new HTMLWebpackPlugin({
    template: fileName,
    filename: fileName.replace(/\.njk$/, '.html')
  });
}

module.exports = function() {
  const templates = getTemplates().then((files) => files.map(toPlugin));

  return templates.then(function(templates) {
    return {
      // ... all other config with loaders and etc
      plugins: [
        ...templates
      ]
    }
  });
};