ejs-easy-loader
v0.1.4
EJS loader for webpack. Uses EJS templating engine, achieving partial in templates.
0/weekUpdated 3 years agoMITUnpacked: 10.9 KB
Published by Snoleo
npm install ejs-easy-loader
[![npm][npm]][npm-url]
[![node][node]][node-url]
[![deps][deps]][deps-url]
ejs-easy-loader for Webpack
EJS loader for Webpack( webpack github ). Uses ejs( ejs github ) templating engine to compile templates, easy to insert partial in templates.
Installation
npm install ejs-easy-loader
Usage
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.
$3
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
$3
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
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
$3
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.
$3
If you want to minimize the output htmls, you should set minify option in html-webpack-plugin.
Why another ejs loader
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.
License
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