node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »


Webpack Swig loader

Travis build status dependencies Coverage Status

NPM info

Webpack loader for swig templates.

How to use

Webpack configuration

You can define swig loader using webpack configuration.

  module: {
    loaders: [
      { test: /\.swig$/, loader: "swig-loader" }

Require parameter

You can load swig template using require parameter.

var template = require('swig!./template.swig');

Passing swig options

You can pass swig options to the loader using swigLoader.options({ ... }) or loader query parameters. If you choose loader query parameters take a look at query webpack standard query format.

// Option #1 - Swig loader global options 
var swigLoader = require('swig-loader');
  varControls: ['{:', ':}']
// Option #2 - Swig loader query parameters 
var swigLoader = require('swig?varControls[]={:&varControls[]=:}!./template.swig');

Passing template parameters

You can pass template parameters to the loader using resource query parameters. If you need to pass some parameters take a look at query webpack standard query format.

var swigLoader = require('swig!./template.swig?username=John');


You can customize query, resourceQuery and result using customizers:

var swigLoader = require('swig-loader');
swigLoader.queryCustomizer(function(query, templatepath) {
    // modify query 
swigLoader.resourceQueryCustomizer(function(resourceQuery, templatepath) {
    // modify resource query 
swigLoader.resultCustomizer(function(query, templatepath, resourceQuery, query) {
    // modify result and don't forget to return it! 
    return result;