A few seconds.

ejs-loader

EJS (Underscore/LoDash Templates) loader for webpack

ejs-loader for webpack

EJS (Underscore/LoDash Templates) loader for webpack. Uses lodash template function to compile templates.

If you are looking for the loader which uses EJS templating engine, there is ejs-compiled-loader

Installation

npm install ejs-loader

Usage

Documentation: Using loaders

var template = require("ejs!./file.ejs");
// => returns the template function compiled with undesrcore (lodash) templating engine.

// And then use it somewhere in your code
template(data) // Pass object with data

You also should provide a global _ variable with the lodash/underscore runtime. You can do it with the following webpack plugin: https://github.com/webpack/docs/wiki/list-of-plugins#provideplugin

plugins: [
    new webpack.ProvidePlugin({
        _: "underscore"
    })
]

Options

Underscore/Lodash options can be passed in using the querystring or adding an esjLoader options block to your configuration.

Config example using a querystring:

module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader?variable=data' },
    ]
  }
};

is equivalent to

var template = _.template('<%= template %>', { variable : 'data' });
module.exports = {
    module: {
        loaders: [
            {
                test: /\.ejs$/, 
                loader: 'ejs-loader', 
                query: { 
                    variable: 'data', 
                    interpolate : '\\{\\{(.+?)\\}\\}', 
                    evaluate : '\\[\\[(.+?)\\]\\]' 
                }
            },
        ]
    }
};

is equivalent to

var template = _.template('<%= template %>', { variable: 'data', interpolate : '\\{\\{(.+?)\\}\\}', evaluate : '\\[\\[(.+?)\\]\\]' });

Config example using the ejsLoader config block:

module.exports = {
  module: {
    loaders: [
      { test: /\.ejs$/, loader: 'ejs-loader',
    ]
  },
  ejsLoader : {
    variable    : 'data',
    interpolate : /\{\{(.+?)\}\}/g,
    evaluate    : /\[\[(.+?)\]\]/g
  }
};

Release History

  • 0.3.0 - Allow passing template options via ejsLoader or via loader's query
  • 0.2.1 - Add ability to pass compiller options
  • 0.1.0 - Initial release

License

MIT (http://www.opensource.org/licenses/mit-license.php)

Pincer is a project which aims to provide best library discovery tools for developers. We're growing day by day. We have only npm platform for now but we will add the others as much as we can.