<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><%= title %></title>
</head>
<body>
    <p><%= someVar %></p>
</body>
</html>

webpack.config.js


const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {
          test: /\.ejs$/,
          use: [
              {
                loader: "ejs-webpack-loader",
                options: {
                  data: {title: "New Title", someVar:"hello world"},
                  htmlmin: true
                }
              }
          ]
      }
    ]
  }
};

Config Setup examples with separate extractor


const path = require('path');

const config = {
  entry: [
    './src/index.ejs',
    './src/main.ejs',
  ]
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
      rules: [
          {
              test: /\.ejs$/,
              use: [
                  {
                      loader: 'file-loader',
                      options: {
                          name: '[name].html',
                          context: './src/',
                          outputPath: '/'
                      }
                  },
                  {
                      loader: 'extract-loader'
                  },
                  {
                      loader: "ejs-webpack-loader",
                      {
                        data: {title: "New Title", someVar:"hello world"},
                        htmlmin: true
                      }
                  }
              ]
          }
      ]
  }
};

Config Setup examples (via HtmlWebpackPlugin)


const path = require('path');

const config = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    ...
  },
  plugin: {
    new HtmlWebpackPlugin({
        template: '!!ejs-webpack-loader!src/index.ejs'
    })
  }
};

module.exports = config;

EJS Example

Documentation: Using loaders

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

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

// Child Templates
// path is relative to where webpack is being run
<%- include templates/child -%>

Options

Following options can be specified in query:

beautify — enable or disable uglify-js beautify of template ast

compileDebug — see ejs compileDebug option

htmlmin — see htmlminify section

htmlminify

module: {
    rules: [
        {
            test: /\.ejs$/,
            use: [
                {
                  loader: "ejs-webpack-loader",
                  options: {
                    htmlmin: true
                  }
                }
            ]
        }
    ]
}

See all options reference

License

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

Keywords

FAQs

What is ejs-webpack-loader?

Is ejs-webpack-loader popular?

Is ejs-webpack-loader well maintained?

Package last updated on 18 Apr 2018

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

ejs-webpack-loader