ejs-webpack-loader

2.2.2 verified Sat Apr 25 auth: no javascript

EJS template loader for webpack 4.x that compiles .ejs files into JavaScript template functions using the ejs library. Version 2.2.2 is the latest stable release, with no recent updates. It supports options like beautify, compileDebug, and htmlmin. Unlike ejs-loader or ejs-compiled-loader, this package is specifically designed for webpack 4 and avoids frontend dependencies. Useful for server-side rendering or generating HTML files with webpack.

Common errors

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause Missing or misconfigured rule for .ejs files in webpack config.

fix

Add a rule with ejs-webpack-loader as shown in the quickstart.

error Error: Could not find loader 'ejs-webpack-loader' ↓

cause Package not installed or not in node_modules.

fix

Run 'npm install ejs-webpack-loader --save-dev'

error TypeError: template is not a function ↓

cause Using the exported function as a string without calling it.

fix

Call the imported template function with data: template({ title: '...' })

Warnings

gotcha EJS data must be passed via the 'data' option, not directly in the template. The template cannot access webpack variables like __dirname. ↓

fix Pass all variables under the 'data' property in the loader options.

gotcha The loader returns a function, not a string. To get rendered HTML, you must call the function with data (or use separate extractors like file-loader or HtmlWebpackPlugin). ↓

fix Use extract-loader or HtmlWebpackPlugin to output HTML, or call the returned function in your code.

deprecated Webpack 4 loader query string options (e.g., 'ejs-webpack-loader?htmlmin=true') are deprecated in favor of the 'options' object. ↓

fix Use the 'options' property in the rule as shown in the quickstart.

Install

npm install ejs-webpack-loader

yarn add ejs-webpack-loader

pnpm add ejs-webpack-loader

Imports

ejs-webpack-loader
wrong
```
const loader = require('ejs-webpack-loader')
```
correct
```
import 'ejs-webpack-loader' // no import, used in webpack config
```
This package is a webpack loader, not a JavaScript module. It is used in webpack configuration under module.rules.

default export

wrong

rule.loader = 'ejs-webpack-loader?data=...'

correct

rule.use = [{ loader: 'ejs-webpack-loader', options: { data: {...}, htmlmin: true } }]

Pass options using the options object, not query string, to avoid deprecation warnings in webpack 4.

template function

wrong

import template from './file.ejs' // without loader prefix

correct

import template from '!!ejs-webpack-loader!./file.ejs'; // returns function

Use inline loader syntax (!!) with HtmlWebpackPlugin or for direct require.

Quickstart

Webpack configuration using ejs-webpack-loader to compile .ejs templates with data and HTML minification.

// webpack.config.js
const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') },
  module: {
    rules: [{
      test: /\.ejs$/,
      use: [{ loader: 'ejs-webpack-loader', options: { data: { title: 'Hello', someVar: 'World' }, htmlmin: true } }]
    }]
  }
};