https://github.com/julians/nunjucks-loader

Nunjucks loader for webpack, supporting both javascript templating and generating static HTML files through the HtmlWebpackPlugin.
https://github.com/julians/nunjucks-loader

jinja loader nunjucks template webpack

Last synced: about 2 months ago
JSON representation

Nunjucks loader for webpack, supporting both javascript templating and generating static HTML files through the HtmlWebpackPlugin.

• Host: GitHub
• URL: https://github.com/julians/nunjucks-loader
• Owner: julians
• License: mit
• Created: 2019-07-31T21:09:55.000Z (over 5 years ago)
• Default Branch: main
• Last Pushed: 2023-04-20T21:42:59.000Z (over 1 year ago)
• Last Synced: 2024-04-24T23:01:21.167Z (9 months ago)
• Topics: jinja, loader, nunjucks, template, webpack
• Language: JavaScript
• Size: 33.2 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](https://github.com/SudoCat/Nunjucks-Isomorphic-Loader).

## Installation

This loader needs [`nunjucks`](https://www.npmjs.com/package/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:

```bash

yarn add nunjucks -D

```

Using npm:

```bash

npm install nunjucks -D

```

If you have nunjucks installed, you can then install the loader.

Using yarn:

```bash

yarn add @julians/nunjucks-loader -D

```

Using npm:

```bash

npm install @julians/nunjucks-loader -D

```

## Usage

Basic usage of this loader with `html-webpack-plugin`

```js

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.

```nunjucks

{{ "src/assets/whatever.jpg" | require }}

```

## Options

```js

// 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` :

```nunjucks

{% set vars = htmlWebpackPlugin.options.customData %}

  

    

    {{ vars.foo }}{# outputs 'bar' #}

  

  

    

    {% block header %}

      


        {{ vars.foo }}{# outputs 'bar' #}

      

    {% endblock %}

    


    {% block content %}

      

        
I was generated with html-webpack-plugin and @julians/nunjucks-loader!

      

    {% endblock %}

  


```