Gathering detailed insights and metrics for mini-html-webpack-plugin
Gathering detailed insights and metrics for mini-html-webpack-plugin
A miniature version of html-webpack-plugin with only necessary features
Installations
npm install mini-html-webpack-pluginDeveloper
Developer Guide
BETA
Module System
CommonJS
Min. Node Version
>=10
Typescript Support
Yes
Node Version
10.22.1
NPM Version
6.14.6
Statistics
57 Stars
99 Commits
3 Forks
3 Watching
6 Branches
8 Contributors
Updated on 03 Sept 2024
Languages
TypeScript (91.47%)
JavaScript (8.26%)
CSS (0.28%)
Total Downloads
Cumulative downloads
Total Downloads
32,686,588
Last day
-9.3%
10,358
Compared to previous day
Last week
-5.1%
53,058
Compared to previous week
Last month
16%
236,025
Compared to previous month
Last year
-32.8%
3,234,575
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Versions
mini-html-webpack-plugin: a miniature version of html-webpack-plugin with only necessary features
The plugin writes CSS and JS asset paths for you automatically. It works with webpack 4 or higher.
It does not work with html-webpack-plugin plugins!
Usage
1npm install mini-html-webpack-plugin
1const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin'); 2 3const config = { 4 plugins: [ 5 new MiniHtmlWebpackPlugin({ 6 // Optional, defaults to `index.html` 7 filename: 'demo.html', 8 // Optional 9 publicPath: 'demo/', 10 context: { 11 title: 'Webpack demo', 12 // Optional, defaults to `{ lang: 'en' }` 13 htmlAttributes: { 14 lang: 'en' 15 }, 16 // Optional, any additional HTML attached within <head> 17 head: '', 18 // Optional, any additional HTML attached within <body> 19 body: '', 20 // Optional 21 cssAttributes: { 22 rel: 'preload', 23 as: 'style' 24 }, 25 // Optional 26 jsAttributes: { 27 defer: true 28 } 29 }, 30 // Optional, use this for choosing chunks to include to your page. 31 // See the expanded example below. 32 chunks: ['app'] 33 }) 34 ] 35};
Multiple pages
It's possible to use MiniHtmlWebpackPlugin to develop sites with multiple pages. It can be combined with webpack's bundle splitting so you can share common code across different pages.
To achieve this, you'll have to define entry against each the code for each page and define MiniHtmlWebpackPlugin to match them. In practice you might want to abstract this pairing but to give you the full idea, consider the example below.
1const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin'); 2 3const config = { 4 entry: { 5 app: './app.js', 6 another: './another.js' 7 }, 8 plugins: [ 9 new MiniHtmlWebpackPlugin({ 10 filename: 'index.html', 11 chunks: ['app'], 12 }), 13 new MiniHtmlWebpackPlugin({ 14 filename: 'another.html', 15 chunks: ['another'], 16 }, 17 ], 18};
HTML minification
1const minify = require('html-minifier').minify; 2const { MiniHtmlWebpackPlugin } = require('mini-html-webpack-plugin'); 3 4const config = { 5 plugins: [ 6 new MiniHtmlWebpackPlugin({ 7 context: { 8 title: 'Minification demo' 9 }, 10 template: (context) => 11 minify(MiniHtmlWebpackPlugin.defaultTemplate(context)) 12 }) 13 ] 14};
Custom templates
Use @vxna/mini-html-webpack-template to add an app container div, a favicon, meta tags, inline JavaScript or CSS.
Or define a template function to generate your own code.
The template function may return a string or a Promise resolving to a string.
1const { 2 MiniHtmlWebpackPlugin, 3 generateAttributes, 4 generateCSSReferences, 5 generateJSReferences 6} = require('mini-html-webpack-plugin'); 7 8const config = { 9 plugins: [ 10 new MiniHtmlWebpackPlugin({ 11 filename: 'demo.html', 12 publicPath: 'demo/', 13 // `context` is available in `template` below 14 context: { 15 title: 'Webpack demo', 16 htmlAttributes: { 17 lang: 'en' 18 }, 19 cssAttributes: { 20 rel: 'preload', 21 as: 'style' 22 }, 23 jsAttributes: { 24 defer: true 25 } 26 }, 27 template: ({ 28 css, 29 js, 30 publicPath, 31 title, 32 htmlAttributes, 33 cssAttributes, 34 jsAttributes 35 }) => { 36 const htmlAttrs = generateAttributes(htmlAttributes); 37 38 const cssTags = generateCSSReferences({ 39 files: css, 40 attributes: cssAttributes, 41 publicPath 42 }); 43 44 const jsTags = generateJSReferences({ 45 files: js, 46 attributes: jsAttributes, 47 publicPath 48 }); 49 50 return `<!DOCTYPE html> 51 <html${htmlAttrs}> 52 <head> 53 <meta charset="UTF-8"> 54 <title>${title}</title> 55 ${cssTags} 56 </head> 57 <body> 58 ${jsTags} 59 </body> 60 </html>`; 61 } 62 }) 63 ] 64};
License
MIT.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: License.md:0
- Info: FSF or OSI recognized license: MIT License: License.md:0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 30 are checked with a SAST tool
Reason
10 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Score
2
/10
Last Scanned on 2024-11-18
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More