twing-loader

Webpack loader for Twig templates, based on Twing.

Prerequisites

• Webpack 5

Installation

npm install twing-loader

Usage

twing-loader is a very straightforward Webpack loader, requiring only one option, the environment that is used to compile the templates.

_{webpack.config.mjs}

import {createEnvironment, createFilesystemLoader} from "twing";
import fs from "fs";

module.exports = {
    entry: 'index.js',
    // ...
    module: {
        rules: [
            {
                test: /\.twig$/,
                use: [
                    {
                        loader: 'twing-loader',
                        options: {
                            environment: createEnvironment(createFilesystemLoader(fs))
                        }
                    }
                ]
            }
        ]
    }
}

_index.twig

{{ foo }}

_index.mjs

import {createEnvironment, createArrayLoader} from "twing";
import template from "./index.twig";
import assert from "assert";

const environment = createEnvironment(createArrayLoader({}));

template.render(environment, {
    foo: 'bar'
}).then((output) => {
    assert(output === "bar");
});

Template signature

Twig templates imported using this loader are transformed into modules which default export has the following signature:

interface Template {
    execute: import("twing").TwingTemplate["execute"];
    render: import("twing").TwingTemplate["render"];
}

Please refer to Twing documentation for more information.

Options

Name	Required	Type	Description
environment	true	import("twing").TwingEnvironment	The environment instance used by the loader to compile the templates.