EJS (Embeded JavaScript) loader for Webpack. It converts EJS templates to plain HTML using the EJS npm package.
npm i -D ejs-plain-loader
<!DOCTYPE html>
<html lang="en">
<head>
<%= include('partials/head.ejs') %>
</head>
<body>
<%= include('partials/navbar.ejs') %>
<main>
<!-- ... -->
</main>
<%= include('partials/footer.ejs') %>
</body>
</html>NOTE: You need to chain the ejs-plain-loader with an html loader such as the html-loader and use a template plugin such as the html-webpack-plugin. To install these run npm i -D html-loader html-webpack-plugin.
Inside your webpack config file add the fallowing rules
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ...
module: {
rules: [{
test: /\.ejs$/i,
use: [{
loader: 'html-loader', // loader for html files goes here
options: {
attrs: [':src', ':data-src', 'source:srcset', 'source:data-srcset'], // load(require) images, videos or other resources
interpolate: true
}
}, {
loader: 'ejs-plain-loader'
}]
}]
},
plugins: [
new HtmlWebpackPlugin({ // plugin for templates goes here
template: './src/views/index.ejs'
})
]
// ...
} <!-- plain import -->
<%- include('partials/my-awesome-partial.ejs') %>
<!-- appending data -->
<%- include('partials/card.ejs', {
title: 'Lorem ipsum',
content: 'Lorem ipsum dolor sit amet',
actions: ['read more', 'add to favorites']
}) %>Example:
index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%- include('partials/header.ejs', {
title: 'Webpack Starter App',
author: 'John Doe',
keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'],
description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.'
}) %>
</head>
<body>
<%- include('partials/navbar.ejs') %>
<main>
<!-- MAIN CONTENT -->
</main>
<%- include('partials/footer.ejs') %>
</body>
</html>header.ejs
<%
if (typeof description === 'undefined') description = 'placeholder';
if (typeof keywords === 'undefined') keywords = ['placeholder'];
if (typeof author === 'undefined') author = 'placeholder';
if (typeof title === 'undefined') title = 'placeholder';
%>
<meta charset="UTF-8">
<meta name="description" content="<%= description %>">
<meta name="keywords" content="<%= keywords.join(',') %>">
<meta name="author" content="<%= author %>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= title %></title>Note: When you import a file using the import partials/navbar syntax you have to use this syntax across all of the files you are including in navbar.ejs.
Example:
index.ejs
<!DOCTYPE html>
<html lang="en">
...
<body>
...
<%- include partials/navbar %>
...
</body>
</html>navbar.ejs
<!DOCTYPE html>
<html lang="en">
...
<body>
...
<%- include('partials/navbar.ejs') %> <!-- Throws an error -->
<%- include partials/navbar %> <!-- Works fine -->
...
</body>
</html>index.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<%-
const meta = require('../data/index-meta.js');
include('partials/header.ejs', meta);
%>
</head>
<!-- ... -->
</html>index-meta.js
module.exports = {
title: 'Webpack Starter App',
author: 'John Doe',
keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'],
description: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit.',
customFunction: function() {
// ...
}
}See tags
See EJS options
For more info on how to use EJS visit their npm package page or their official website