Skip to content

CodeCoupler Webpack Import EJS Templates

If you need to write an EJS template, you can use the extension *.ejs.html or *.template.html.

Files ending in *.ejs.html will be parsed by the package ejs. Files ending in *.template.html will be parsed by the underscore function template.

Then, you can use variables such as <%= locals["some-var"] %> in your template. All HTML templates will be included in the final JavaScript bundle.

In your JavaScript file, require the templates and submit the properties of the variable data like this:

1
2
import htmlTemplate from "./path/to/your/file.ejs.html";
let resultingHtml = htmlTemplate({ "some-var": "some-value" });

Linked Assets

To link assets such as images, you must use the following syntax:

1
<img src="<%- require('./image.png') %>" />

The filename must start with ./.

Nested Templates

To use the include methods of EJS you have to pay attention to the following:

If you are using the ejs parser, you cannot use the include() function. Instead, you must use the include preprocessing statement:

1
<%- include inc/part.html %>

If you are using the template() function, you must include the content from variables, as described here: Including nested templates:

index.js:

1
2
3
var mainTemplate = require("ejs!./main.ejs");
var hyperlinkTemplate = require("ejs!./hyperlink.ejs");
var renderedHtml = mainTemplate({ hyperlink: hyperlinkTemplate });

main.ejs:

1
<h1><%= hyperlink({ name: 'Example', url: 'http://example.com' }) %></h1>

hyperlink.ejs:

1
<a href="<%= url %>"><%= name %></a>

As a result, renderedHtml becomes a string <h1><a href="http://example.com">Example</a></h1>.