@julians/nunjucks-loader
v2.0.0
Published
A nunjucks loader for webpack, supporting both javascript template usage and static compilation through HtmlWebpackPlugin.
Downloads
45
Maintainers
juliansReadme
Nunjucks loader for Webpack
Nunjucks loader for webpack, supporting both javascript templating and generating static HTML files through the HtmlWebpackPlugin.
Originally forked from SudoCat/Nunjucks-Isomorphic-Loader.
Installation
This loader needs nunjucks as a peer dependency. Versions >= 2.5.0 <= 4.0.0 are accepted. If you do not have nunjucks already installed, first run:
Using yarn:
yarn add nunjucks -DUsing npm:
npm install nunjucks -DIf you have nunjucks installed, you can then install the loader.
Using yarn:
yarn add @julians/nunjucks-loader -DUsing npm:
npm install @julians/nunjucks-loader -DUsage
Basic usage of this loader with html-webpack-plugin
module: {
rules: [
{
test: /\.(njk|nunjucks|html|tpl|tmpl)$/,
use: [
{
loader: '@julians/nunjucks-loader',
query: {
root: [path.resolve(__dirname, 'path/to/templates/root')]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
customData: { foo: 'bar' },
filename: 'list.html',
template: 'path/to/template.nunjucks'
})
]Requiring assets in templates
Uses regular Webpack loaders to load the required file, so you have to have them configured in your Webpack config.
{{ "src/assets/whatever.jpg" | require }}Options
// include specific templates
includeTemplates: [/.*\.(njk|nunjucks|html|tpl|tmpl)$/],
// enable jinja compatibility
jinjaCompat: true,
// add custom filters
filters: {
obj_debug: function(variable) {
return JSON.stringify(variable, null, 2);
},
},Accessing data from the templates with the above config of html-webpack-plugin
path/to/template.njk :
{% set vars = htmlWebpackPlugin.options.customData %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{ vars.foo }}</title>{# outputs 'bar' #}
</head>
<body>
<header class="header">
{% block header %}
<h1 class="header-logo">
<a href="#">{{ vars.foo }}</a>{# outputs 'bar' #}
</h1>
{% endblock %}
</header>
{% block content %}
<section>
<p>I was generated with html-webpack-plugin and @julians/nunjucks-loader!</p>
</section>
{% endblock %}
</body>
</html>