html-webpack-template-plugin
Advanced tools
Simplifies creation of HTML files based on template and config file
Simplifies creation of HTML files based on template and config file Edit.
In most MPA(Multi Page App) project, multi page modules share one context, common libraries etc, and under the same webpack build config. Also, every module own its index.html which include its resources with the awesome html-webpack-plugin.
This plugin is an enhancement of html-webpack-plugin. Every module shares one common index.html template, plugin will help it generate its unique index.html by reading its template config.
Instal the plugin with npm:
$ npm install html-webpack-template-plugin --save-dev
First create template file and module config file.
Template file parsed by template engine like handlebars or ejs, which support two common template syntax Mustache and Embedded JavaScript.
index.hds
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
{{{metaTag meta}}}
<title>{{title}}</title>
</head>
<body>
{{#if body}}
{{{body}}}
{{else}}
<div id="#app"></app>
{{/if}}
{{#each scripts}}
<script src="{{this}}"></script>
{{/each}}
</body>
</html>
As mentioned above, every module has own template config file. You can write it by yaml/json.
{{module}}/index.yml
title: 'page2'
body: '<p>This is page2</p>'
stylesheets:
- 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.7/semantic.min.js'
scripts:
- 'https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'
More examples under /example folder
const htmlWebpackPlugin = require('html-webpack-plugin')
const htmlTemplatePlugin = require('html-webpack-template-plugin')
var webpackConfig = {
...
plugins: [
...
// All modules htmlWebpackPlugin here
new html-webpack-template-plugin({
...
})
]
}
root: project root path. Default to process.cwd().engine: handlebars(default) | ejs.template: [required] template file location.variable: Object A map of predefined variables which will be injected into
template and can be overwrote by config file.helper: Object A map of view helpers which will be injected into
template and can be overwrote by config file.filter: Function A pure function which receives module config and html-webpack-plugin option, return the real config handled by view parser.Extra options added in htmlWebpackPlugin:
disableTemplate: true | false(default).scriptAttribute: Object A map of script attributes will be setcollapseBooleanAttributes: true in html-webpack-plugin minify option to remove true/false value.This project is licensed under MIT.
FAQs
Simplifies creation of HTML files based on template and config file
We found that html-webpack-template-plugin demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.