nunjucks-extend-loader v0.0.3

Nunjucks Extend Loader (Webpack)

Recently, I want to make my own frameworks based on webpack and nunjucks. I need a nunjucks loader but both nunjucks-loader and nunjucks-html-loader doesn't meet my needs, so i create this loader based on nunjucks-html-loader.

Usage

This is a very simple webpack loader for nunjucks files., you can use it with HtmlWebpackPlugin like this:

var conf = {
        template:  '!!file-loader?name=../' + pathname + '.html!nunjucks-extend-loader?{"searchPaths":["views"],"context":'+ context +',"imgroot":"src"}!views/' + pathname + '.html',
};
config.plugins.push(new HtmlWebpackPlugin(conf));

Configuration

pathname is the name of html, like path/to/index.html. searchPaths is the seq of where the template lie in. If your html is:

{% extends 'base.html' %}

Then, searchPaths tell the loader where to find base.html. context is the data you want to render in the template, such as:

// context
{
    'title': 'nunjucks'
}

// html
{{ title }}  // nunjucks

imgroot tell the loader where to find src of <img>, the value is path relative to root. The loader will find every <img src="path"> and copy the file to ./build/path:

// html
<img src="assets/images/bg.jpg">

- root
    - src/assets/images/bg.jpg  

after loader:

- root
    - build/assets/images/bg.jpg 
    - src/assets/images/bg.jpg 

Example

Webjucks is my framework use this loader.

Then I want add a function to this loader so that it can configure Nunjuckcs.