Ejs-html-loader NPM

ejs-html-loader

Webpack loader for rendering plain HTML from EJS template files

Install

Install with npm. Ensure EJS and Webpack are installed as well, as these are peer dependencies.

npm install --save-dev webpack ejs ejs-html-loader

Usage

In your Webpack configuration, pass data to your templates through either an 'options' object or as query parameters.

module.exports = {
  // ...
  module: {
    rules: [{
      test: /\.ejs$/,
      loader: 'ejs-html-loader',
      options: {
        title: 'The Ant: An Introduction',
        season: 1,
        episode: 9,
        production: process.env.ENV === 'production'
      }
    }]
  }
};

Data may also be passed through a resource query. These data take precedence over any options with the same name.

import "./index.ejs?page=home";

Options

All properties passed as loader options will be available to your templates as local variables. In addition, the following EJS options may be set:

context : object The value of this in your templates. If specified, its properties will be available in your templates, e.g. <%= this.somePropery %>.
delimiter : string='%' Character used inside of angle brackets marking opening/closing tags. Defaults to '%', as in <%= some.variable %>.

For example:

{
  // ...
  options: {
    delimiter: '$',
    title: 'The Naked Ant',
    season: 1,
    episode: 12
  }
}

Includes

The EJS filename option is set automatically, so you may include partials relative to your template files. If you want your included files to automatically recompile in watch mode, be sure to use the following syntax: