https://github.com/sudocat/nunjucks-isomorphic-loader

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

html-webpack-plugin nunjucks webpack webpack-loader

Last synced: 14 days 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/sudocat/nunjucks-isomorphic-loader
• Owner: SudoCat
• License: mit
• Archived: true
• Created: 2017-02-20T23:39:25.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-22T13:32:51.000Z (over 6 years ago)
• Last Synced: 2024-09-26T07:43:42.590Z (4 months ago)
• Topics: html-webpack-plugin, nunjucks, webpack, webpack-loader
• Language: JavaScript
• Size: 16.6 KB
• Stars: 16
• Watchers: 4
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Nunjucks Isomorphic loader for webpack

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:

- [3dos](https://github.com/3dos)

- [sebbdk](https://github.com/sebbdk)

## Installation

This loader need [`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:

```

yarn add nunjucks -D

```

Using npm:

```

npm install nunjucks -D

```

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

Using yarn:

```

yarn add nunjucks-isomorphic-loader -D

```

Using npm:

```

npm install nunjucks-isomorphic-loader -D

```

## Usage

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 %}

  

    

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

  

  

    

    {% block header %}

      


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

      

    {% endblock %}

    


    {% block content %}

      

        
I was generated with html-webpack-plugin and nunjucks-isomorphic-loader!

      

    {% endblock %}