basic ejs loader for webpack
// simple usage
require('ejs-simple!./path/to/file.ejs')
// with data as params
require('ejs-simple?key=value!./path/to/file.ejs')
{loader}!file.ext
syntax of webpack is one of the common way to use loader.
Personally, I combined ejs-simple-loader
with html-webpack-plugin to make html and insert javascript on it.
// with html-webpack-plugin
new HtmlWebpackPlugin({
title: template,
filename: template + '.html',
template: 'ejs-simple?title=' + template + '&distPath=' + DIST_PATH + '!src/templates/' + template + '.ejs',
chunks: ['landing'],
distPath: DIST_PATH
})
so it goes as followes: ejs -> html -> javascript inserted html
<!-- Use include syntax -->
<!-- Use filenames relative to working dir. -->
<div>
<%- include('./header', {locale: locale}) %>
</div>
If it is used with html-webpack-plugin, the path is relative to the location of mother template. so if templates are stored in same directory, './filename' is enough.
// also can pass params with global options
config.ejsSimpleLoader = {
key: 'test',
title: template,
distPath: DIST_PATH
}
- a possible problem with webpack2
rules.use.loader
. I recommand you to use this withhtml-webpack-plugin
.
npm install --save ejs-simple-loader
I know there are several ejs loader available. ejs-loader, ejs-compiled-loader, ejs-render-loader have already existed and still works.
But, ejs-loader use lodash
instead of de facto official ejs.
ejs-compiled-loader have problem with <%- include('header') %>
syntax. it works in <%- include header %>
syntax form, which is still supported, but seems to fail on more recent syntax. And also too many unnecessary dependencies like html-minifier
, merge
, and uglify-js
.
ejs-render-loader performs perfectly, but I couldn't find repo of it. Only npm package seems to exist.
html-webpack-plugin supports ejs or other template engines by itself. However include
syntax is not possible.
And all of them are not actively updated. I'm not promising eternal maintenance of this library, but rather will do my best. ;)
ejs-simple-loader is MIT licensed.