EJS loader for webpack. Uses EJS templating engine, achieving partial in templates.
npm install ejs-easy-loader[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
EJS loader for Webpack( webpack github ). Uses ejs( ejs github ) templating engine to compile templates, easy to insert partial in templates.
npm install ejs-easy-loader
Add to webpack conf:
``javascript`
module.exports = {
//...
module: {
rules: [
{ test: /\.ejs$/i, use: [ { loader: 'ejs-easy-loader' } ] }
]
},
//...
};
Include partial in template file:
`html`
<% / following line includes partial ejs file without passing any parameter to partial file / %>
<%- require('./partial-a.ejs')() %>
<% / following line includes partial file and passing a parameter (an object) to partial file / %>
<%- require('./partial-b.ejs')({ 'title': 'Part-B', 'content': 'Partial Content' }) %>
Recommend to use this loader with html-webpack-plugin, a very handy plugin for generating HTML files in Webpack.
Tags are compatible with ejs style:
+ <% 'Scriptlet' tag, for control-flow, no output<%=
+ Outputs the value into the template (HTML escaped)<%-
+ Raw output tag, outputs the unescaped value into the template
Below is a minimal example illustrating how to use ejs-easy-loader to include partials in a template file. You can find this example in examples folder.
#### Step 3-1) Install the modules in ./ejs-easy-loader-eg folder:
``
mkdir -p ./ejs-easy-loader-eg/node_modules && cd ./ejs-easy-loader-eg && \
npm install webpack webpack-cli html-webpack-plugin ejs-easy-loader./ejs-easy-loader-eg
After testing the example, you can just delete this folder.
#### Step 3-2) Create webpack config, template and partial files:
webpack.conf.js
`javascript
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: './index.js',
module: {
rules: [
{ test: /\.ejs$/i, use: [ { loader: 'ejs-easy-loader' } ] }
]
},
plugins: [
new HtmlWebpackPlugin({
template: './template.ejs',
filename: './page-a.html',
title: 'Page A Title',
meta: {'keywords': 'word1, word2', 'description': 'page description'},
name: "a"
}),
new HtmlWebpackPlugin({
template: './template.ejs',
filename: './page-b.html',
title: 'Page B Title',
name: "b",
obj: {"food": "fruit"},
arr: ["apple", "orange", "banana"]
})
]
};
`
index.js
`javascript`
// You can leave this entry file empty in this example.
template.ejs
`html`
Common Page Header
<% if (htmlWebpackPlugin.options.name === "a") { %>
<%- require('./page-a.ejs')() / include partial file without parameter / %>
<% } else if (htmlWebpackPlugin.options.name === "b") { %>
<%- require('./page-b.ejs')(htmlWebpackPlugin.options) / pass an object to partial file / %>
<% } %>
page-a.ejs
`html`This is content for Page A.
page-b.ejs
`html`Content for Page B - <%= obj.food %>
<% arr.forEach(function(item){ %>
<% }); %>
#### Step 3-3) Run webpack to generate HTML files:
./node_modules/webpack/bin/webpack.js --config ./webpack.conf.js
webpack will generate files in folder ./dist/ in default. The two output html files generated are as follows:
./dist/page-a.html
`html`
Common Page Header
This is content for Page A.
./dist/page-b.html
`html`
Common Page Header
Content for Page B - fruit
Generally there is no need to set any additional options for ejs-easy-loader, just load it as { loader: 'ejs-easy-loader' } in webpack config file without any options.
ejs-easy-loader has set the default options { client: true, filename: '.' } for ejs.compile function in the program.
If you want to set some additional options or overwrite the default options(not recommended), refer to EJS docs for more details.
If you want to minimize the output htmls, you should set minify option in html-webpack-plugin.
There are already several ejs loaders for Webpack on github, but most of them are outdated. When I tried to include some partial HTML inside a html-webpack-plugin template file, I could not get a clear and proper solution, neither could answers on stackoverflow.com would help.
After searching and learning I decided to create this ejs-easy-loader`, hope it will help others to work at including partials in a template.
MIT (http://www.opensource.org/licenses/mit-license.php)
[npm]: https://img.shields.io/npm/v/ejs-easy-loader.svg
[npm-url]: https://npmjs.com/package/ejs-easy-loader
[node]: https://img.shields.io/node/v/ejs-easy-loader.svg
[node-url]: https://nodejs.org
[deps]: https://img.shields.io/david/snoleo/ejs-easy-loader.svg
[deps-url]: https://david-dm.org/snoleo/ejs-easy-loader