❤
npm
Sign UpSign In

ejs-plain-loader

1.4.1 • Public • Published

ejs-plain-loader

npm License: MIT Build Status dependency Status devDependency Status

EJS (Embeded JavaScript) loader for Webpack. It converts EJS templates to plain HTML using the EJS npm package.

Instalation

npm i -D ejs-plain-loader

EJS Example

<!DOCTYPE html>
<html lang="en">
<head>
    <%= include('partials/head.ejs') %>
</head>
<body>
    <%= include('partials/navbar.ejs') %>
 
    <main>
        <!-- ... -->
    </main>
 
    <%= include('partials/footer.ejs') %>
</body>
</html>

Usage

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'
        })
    ]
    // ...
}

Importing partials

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

Importing JavaScript or JSON files

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() {
        // ...
    }
}

Tags

See tags

Options

See EJS options

More info

For more info on how to use EJS visit their npm package page or their official website

Readme

Keywords

Package Sidebar

Install

npm i ejs-plain-loader

Repository

github.com/ThisNameWasTaken/ejs-plain-loader

Homepage

github.com/ThisNameWasTaken/ejs-plain-loader#readme

Weekly Downloads

57

Version

1.4.1

License

MIT

Unpacked Size

23.5 kB

Total Files

29

Last publish

Collaborators

  • thisnamewastaken
Try on RunKit
Report malware