
Research
Security News
The Landscape of Malicious Open Source Packages: 2025 Mid‑Year Threat Report
A look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
html-webpack-template
Advanced tools
A template with more features than the default html-webpack-plugin template
This is a template for the webpack plugin html-webpack-plugin.
It has a few extra features than the default template
which will hopefully make it less likely that you'll have to create your own index.html
file in your webpack project.
Templates for the html-webpack-plugin are implemented using underscore templates (previously, in 2.x, blueimp templates). You can write your own as well.
For the legacy version that works with html-webpack-plugin@1.x
, npm install html-webpack-plugin@2
.
Install the template in your project with npm:
$ npm install html-webpack-template --save-dev
To make it work, you need to provide these required parameters:
inject: false
template: require('html-webpack-template')
And you can provide some other optional parameters:
appMountId
: The <div>
element id on which you plan to mount a JavaScript app.appMountHtmlSnippet
: A small snippet of HTML that will be inserted in the <div>
element the appMountId is attached to.appMountIds
: An array of application element ids.baseHref
: Adjust the URL for relative URLs in the document (MDN).devServer
: Insert the webpack-dev-server hot reload script at this host:port/path; e.g., http://localhost:3000.googleAnalytics.trackingId
: Track usage of your site via Google Analytics.googleAnalytics.pageViewOnLoad
: Log a pageview
event after the analytics code loads.lang
: String identifying your content languagelinks
: Array of <link>
elements.
href
attribute and the rel
attribute is set to
"stylesheet"
;meta
: Array of objects containing key value pairs to be included as meta tags.mobile
: Sets appropriate meta tag for page scaling.inlineManifestWebpackName
: For use with inline-manifest-webpack-plugin.scripts
: Array of external script imports to include on page.
src
attribute and the type
attribute is set to
"text/javascript"
;window
: Object that defines data you need to bootstrap a JavaScript app.headHtmlSnippet
: A small snippet of HTML that will be inserted in the head element.bodyHtmlSnippet
: A small snippet of HTML that will be inserted in the body element.Plus any html-webpack-plugin config options otherwise available.
Here's an example webpack config illustrating how to use these options in your webpack.config.js
:
{
// ...
plugins: [
new HtmlWebpackPlugin({
// Required
inject: false,
template: require('html-webpack-template'),
// template: 'node_modules/html-webpack-template/index.ejs',
// Optional
appMountId: 'app',
appMountHtmlSnippet: '<div class="app-spinner"><i class="fa fa-spinner fa-spin fa-5x" aria-hidden="true"></i></div>',
headHtmlSnippet: '<style>div.app-spinner {position: fixed;top:50%;left:50%;}</style >',
bodyHtmlSnippet: '<custom-element></custom-element>',
baseHref: 'http://example.com/awesome',
devServer: 'http://localhost:3001',
googleAnalytics: {
trackingId: 'UA-XXXX-XX',
pageViewOnLoad: true
},
meta: [
{
name: 'description',
content: 'A better default template for html-webpack-plugin.'
}
],
mobile: true,
lang: 'en-US',
links: [
'https://fonts.googleapis.com/css?family=Roboto',
{
href: '/apple-touch-icon.png',
rel: 'apple-touch-icon',
sizes: '180x180'
},
{
href: '/favicon-32x32.png',
rel: 'icon',
sizes: '32x32',
type: 'image/png'
}
],
inlineManifestWebpackName: 'webpackManifest',
scripts: [
'http://example.com/somescript.js',
{
src: '/myModule.js',
type: 'module'
}
],
title: 'My App',
window: {
env: {
apiHost: 'http://myapi.com/api/v1'
}
}
// And any other config options from html-webpack-plugin:
// https://github.com/ampedandwired/html-webpack-plugin#configuration
})
]
}
FAQs
A template with more features than the default html-webpack-plugin template
The npm package html-webpack-template receives a total of 0 weekly downloads. As such, html-webpack-template popularity was classified as not popular.
We found that html-webpack-template 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 look at the top trends in how threat actors are weaponizing open source packages to deliver malware and persist across the software supply chain.
Security News
ESLint now supports HTML linting with 48 new rules, expanding its language plugin system to cover more of the modern web development stack.
Security News
CISA is discontinuing official RSS support for KEV and cybersecurity alerts, shifting updates to email and social media, disrupting automation workflows.