htmls-webpack-plugin
Advanced tools
Simple, flexible and fast html webpack plugin.
NOTE: v2 support webpack5, if you still using webpack4, please install htmls-webpack-plugin@v1.0.9
npm i -D htmls-webpack-plugin
const HtmlsWebpackPlugin = require('htmls-webpack-plugin')
module.exports = {
plugins: [
new HtmlsWebpackPlugin({
// optional, hooks
beforeEmit: (compilation, compiler) => void,
// optional, hooks
afterEmit: (compilation, compiler) => void,
// optional, default is ejs. custom template rendering function, support async rendering,
render: (file, params) => string | Promise<string>,
htmls: [{
// template path
src: '',
// string | ((source, src, params) => string), relative to output path, can be a function to be generated via context
filename: '',
// optional, override global render function
render: (file, params) => string | Promise<string>,
// optional, override global flushOnDev
flushOnDev: boolean | string
// custom params when rendering
params: () => object | () => Promise<object> | object
// transformParams, override global transformParams
transformParams?: (params: Params) => Params & { [k: string]: any }
}],
/* boolean | string, flush html files to dist, can be a string file path, useful for debug or devServer. */
flushOnDev: false,
/* optional, override webpackConf's publicPath */
publicPath: function | string',
// optional, custom params when rendering, could be an async function
params: () => object | () => Promise<object> | object
// transformParams
transformParams?: (params: Params) => Params & { [k: string]: any }
})
]
}
The variables in html templates:
interface Params {
entries: string[] // all entrypoints
files: string[] // all files
jses: string[] // all files ends with .js
csses: string[] // all files ends with .css
options: Props // plugin props
compilation: Compilation // webpack compilation
[k: string]: any // custom params via options
}
ejs example
<body>
<% for (let js in entries) {%>
<script src="<%= js %>"></script>
<% } %>
</body>
html-webpack-plugin is really hard to extends and slow for multiple htmls, too much complete features that I don't need. That's why I create this.
MIT
FAQs
A simple, fast, flexible and multiple html webpack plugin.
We found that htmls-webpack-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.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.