Nunjucks loader 
DEPRECATED. This package version is no longer supported. The current version has been renamed to nunjucks-static, please use the actual nunjucks-static package.
Webpack loader for Nunjucks
Install
npm i --save-dev nunjucks-template-loaderUsage
example app (app folder in repository):
npm i && npm run start
used with html-loader and html-webpack-plugin
webpack.config.js
const htmlPlugin = require("nunjucks-template-loader/htmlPlugin");
const paths = {
templates: path.join(__dirname, "templates"),
pages: path.join(paths.templates, "pages"),
output: "",
};htmlPlugin - generating html file using HTML Webpack Plugin
paths.templates - path to your templates
paths.pages - path to your page templates
paths.output - path to output html
module.exports = {
module: {
entry: {
index: [`index/index.js`],
about: [`about/index.js`],
},
rules: [
{
test: /\.(html|njk|nunjucks)$/,
exclude: [/node_modules/],
use: [
"html-loader",
{
loader: "nunjucks-template-loader",
options: {
path: paths.templates,
},
},
],
},
],
},
plugins: [
...htmlPlugin({
pagesPath: paths.pages,
templatePath: paths.templates,
outputPath: paths.output,
data: {
foo: "bar",
title: "site-title",
},
filters: {
shorten: function (value, count) {
return value.slice(0, count || 5);
},
},
}),
],
};example project structure
app
├── ...
├── templates/
│ ├── components/
│ │ ├── header.njk
│ │ └── footer.njk
│ ├── pages/
│ │ ├── index/
│ │ │ └── index.njk
│ │ └── about/
│ │ ├── pages/
│ │ │ └── title/
│ │ │ └── index.njk
│ │ └── index.njk
│ └── layout.njk
└── ...
layout.njk
<!DOCTYPE html>
<html lang="en">
<head>
<title>{{ title }}</title>
{% for name, item in bundles.css %}
<link rel="stylesheet" href="{{ item }}">
{% endfor %}
</head>
<body>
{% include "components/header.njk" %}
<main class="main">
{% block content %}{% endblock %}
</main>
{% include "components/footer.njk" %}
{% for name, item in bundles.js %}
<script src="{{ item }}"></script>
{% endfor %}
</body>
</html>
pages
{% extends "layout.njk" %}
{% block content %}
<div class="content">
<div>{{ foo | shorten(3) }}</div>
<p>bundles var:</p>
{{ bundles | dump | safe }}
</div>
{% endblock %}