nunjucks-isomorphic-loader-ext v1.0.4
Nunjucks Isomorphic loader for webpack
Fork of SudoCat's Nunjucks Isomorphic Loader with a simple bug fix to make it run on Windows machines. Made into separate NPM package because original is currently unmaintained and not accepting pull requests.
Nunjucks loader for webpack, supporting both javascript templating and generating static HTML files through the HtmlWebpackPlugin.
Completely rewritten, now (mostly) error free. Supports context file (.js only) for passing data.
This loader supports the following extensions: .njk, .nunjucks, .html, .tpl, .tmpl
Warning: (Mostly) Unmaintained
Unfortunately, I rarely get much free time to work on this package any more. While I'll always try to answer any questions anyone has, it may take some time and I might not know the correct answer. Luckily the Open Source Community is filled with lovely people who have keep this updated and documented!
Special thanks to:
Installation
This loader need 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 nunjucks-isomorphic-loader -DUsing npm:
npm install nunjucks-isomorphic-loader -DUsage
Basic usage of this loader with html-webpack-plugin
module: {
rules: [
{
test: /\.(njk|nunjucks|html|tpl|tmpl)$/,
use: [
{
loader: 'nunjucks-isomorphic-loader',
query: {
root: [path.resolve(__dirname, 'path/to/templates/root')]
}
}
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
customData: { foo: 'bar' },
filename: 'list.html',
template: 'path/to/template.njk'
})
]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 nunjucks-isomorphic-loader!</p>
</section>
{% endblock %}
</body>
</html>