nunjucks-template-loader

    3.0.1 • Public • Published

    Nunjucks loader NPM version GitHub license NPM size

    Webpack loader for Nunjucks

    Install

    npm i --save-dev nunjucks-template-loader

    Usage

    example app (app folder in repository):

    npm i && npm run start
    

    used with html-loader and html-webpack-plugin

    webpack.config.js

    const htmlPlugin = require('nunjucks-template-loader/htmlPlugin');
    const paths = {
        templates: path.join(__dirname, 'templates'),
        pages: path.join(paths.templates, 'pages'),
        output: '',
    };

    htmlPlugin - generating html file using HTML Webpack Plugin

    paths.templates - path to your templates

    paths.pages - path to your page templates

    paths.output - path to output html

    module.exports = {
        module: {
            entry: {
                firstEntry: [
                    `firstEntry/index.js`,
                ],
                secondEntry: [
                    `secondEntry/index.js`,
                ],
                index: [
                    `index/index.js`,
                ],
                about: [
                    `about/index.js`,
                ]
            },
            rules: [
                {
                    test: /\.(html|njk|nunjucks)$/,
                    exclude: [/node_modules/],
                    use: [
                        'html-loader',
                        {
                            loader: 'nunjucks-template-loader',
                            options: {
                                path: paths.templates
                            }
                        }
                    ]
                }
            ]
        },
        plugins: [
            ...htmlPlugin({
                pagesPath: paths.pages,
                templatePath: paths.templates,
                outputPath: paths.output,
                data: {
                    foo: 'bar',
                    title: 'site-title'
                },
                filters: {
                    shorten: function (value, count) {
                        return value.slice(0, count || 5);
                    }
                }
            }, {
                // ...HTML Webpack Plugin options
                minify: false,
                inject: false,
                chunks: {
                    index: [
                        'firstEntry',
                        'secondEntry'
                    ],
                    about: [
                        'firstEntry'
                    ]
                }
            }, {
                // ...nunjucks options
            })
        ]
    }

    example project structure

    app
    ├── ...
    ├── templates/
    │     ├── components/
    │     │     ├── header.njk
    │     │     └── footer.njk
    │     ├── pages/
    │     │     ├── index/
    │     │     │     └── index.njk
    │     │     └── about/
    │     │            └── index.njk
    │     └── layout.njk
    └── ...
    

    layout.njk

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>{{ title }}</title>
    
        {% for name, item in bundles.css %}
            <link rel="stylesheet" href="{{ item }}">
        {% endfor %}
    </head>
    <body>
    
        {% include "components/header.njk" %}
    
        <main class="main">
            {% block content %}{% endblock %}
        </main>
    
        {% include "components/footer.njk" %}
    
        {% for name, item in bundles.js %}
            <script src="{{ item }}"></script>
        {% endfor %}
    </body>
    </html>
    

    pages

    {% extends "layout.njk" %}
    
    {% block content %}
       <div class="content">
            <div>{{ foo | shorten(3) }}</div>
       </div>
    {% endblock %}
    

    Install

    npm i nunjucks-template-loader

    DownloadsWeekly Downloads

    85

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    27.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • truerk