Skip to content
This repository was archived by the owner on May 16, 2024. It is now read-only.

EJS loader for webpack (without frontend dependencies) - we have to switch to another webpack loader soon, this is only temporary

License

Notifications You must be signed in to change notification settings

capticxyz/ejs-webpack-loader

This branch is 5 commits ahead of rorkflash/ejs-webpack-loader:2.x.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Aug 8, 2023
7c7839f · Aug 8, 2023

History

52 Commits
Oct 13, 2016
Feb 1, 2016
May 12, 2015
Oct 24, 2014
Apr 18, 2018
Aug 8, 2023
Aug 8, 2023

Repository files navigation

ejs-webpack-loader for webpack 4.x

EJS loader for webpack. Uses ejs function to compile templates.

Installation

npm install ejs-webpack-loader

Config Setup examples as module loader

ejs example

<!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)

About

EJS loader for webpack (without frontend dependencies) - we have to switch to another webpack loader soon, this is only temporary

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 93.1%
  • EJS 6.9%