simple-nunjucks-loader

Nunjucks templates loader for Webpack

This Webpack loader compiles Nunjucks templates. html-webpack-plugin compatible.

Install

npm install --save-dev simple-nunjucks-loader

Usage

Loader didn't expose window.nunjucksPrecompiled that could break some installations, that use it directly.

This loader will precompile Nunjucks templates. It also includes Nunjunks (slim) runtime for browser.

Add loader to your webpack config as follows:

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.njk$/,
                use: [
                    {
                        loader: 'simple-nunjucks-loader'
                    }
                ]
            }
        ]
    }
};

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'
                    }
                ]
            }
        ]
    },
    
    plugins: [
        new HTMLWebpackPlugin({
            template: 'src/page.njk'
        })
    ]
};

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

How it works

Nunjunks bundle all precompiled templates to window.nunjucksPrecompiled, then loads them via custom loader from this global object.

Loader precompiles all templates in module closure, and pass it down to custom Nunjucks loader, that retrieve templates from closure.

Also Nunjucks didn't have dependency tree for precompiled templates, it cause precompilation on-demand and will break bundle. To workaround this issue, simple-nunjucks-loader doing some regexp-fu and precompile all required templates.

Options

Loader supports limited number of Nunjuncks options. It's doesn't support watch (it's not relate to webpack files watch), noCache, web settings and express.

All other options get passed to Nunjunks Environment during files loading.

Name	Type	Default	Description
searchPaths	{String|Array.<string>}	.	One or more paths to resolve templates paths

searchPaths

Loader is searching for full template path in next order:

• relative to given string(s) from searchPath option (or project root, if no paths given),
• relative to current file.

Path to file couldn't be outside of folders above.