Gathering detailed insights and metrics for css-chunks-html-webpack-plugin
Gathering detailed insights and metrics for css-chunks-html-webpack-plugin
Gathering detailed insights and metrics for css-chunks-html-webpack-plugin
Gathering detailed insights and metrics for css-chunks-html-webpack-plugin
webpack-flush-chunks-html
This plugin for webpack gets all bundled CSS chunks and injects them globally into window.__CSS_CHUNKS__
webpack-flush-chunks-html-path
This plugin for webpack gets all bundled CSS chunks and injects them globally into window.__CSS_CHUNKS__. Dan has altered this to be able to set a public path. PR is pending against the original codebase.
Injecting css chunks extracted using extract-css-chunks-webpack-plugin to HTML for html-webpack-plugin
npm install css-chunks-html-webpack-plugin
Typescript
Module System
Node Version
NPM Version
42.3
Supply Chain
52.5
Quality
64.9
Maintenance
50
Vulnerability
96.7
License
JavaScript (100%)
Total Downloads
126,191
Last Day
1
Last Week
3
Last Month
55
Last Year
1,584
MIT License
22 Stars
14 Commits
3 Forks
3 Watchers
2 Branches
4 Contributors
Updated on Jan 07, 2021
Minified
Minified + Gzipped
Latest Version
1.1.1
Package Id
css-chunks-html-webpack-plugin@1.1.1
Unpacked Size
72.38 kB
Size
12.80 kB
File Count
18
NPM Version
5.8.0
Node Version
8.9.1
Cumulative downloads
Total Downloads
Last Day
-66.7%
1
Compared to previous day
Last Week
-70%
3
Compared to previous week
Last Month
-8.3%
55
Compared to previous month
Last Year
-34.8%
1,584
Compared to previous year
Plugin for injecting css chunks, extracted using extract-css-chunks-webpack-plugin, to HTML for html-webpack-plugin
Use in conjunction with extract-css-chunks-webpack-plugin and babel-plugin-dual-import to inject CSS chunks paths into your HTML file with html-webpack-plugin.
The current version is incompatible with Webpack 3 or older. In order to use this plugin with Webpack 3, use
css-chunks-html-webpack-plugin@0.1.0
1npm install --save-dev css-chunks-html-webpack-plugin@0.1.0
1npm install --save-dev css-chunks-html-webpack-plugin \ 2 mini-css-extract-plugin babel-plugin-dual-import \ 3 html-webpack-plugin
webpack.config.js
1const ExtractCssPlugin = require('mini-css-extract-plugin'); 2const HtmlWebpackPlugin = require('html-webpack-plugin'); 3const CssChunksHtmlPlugin = require('css-chunks-html-webpack-plugin'); 4 5module.exports = { 6 // your other options 7 plugins: [new ExtractCssPlugin(), new CssChunksHtmlPlugin({ inject: 'head' }), new HtmlWebpackPlugin()], 8};
You can pass an object of configuration options to CssChunkHashPlugin. Allowed values are as follows:
inject
: 'head'
| 'body'
| false
whether to inject chunks paths script into HTML, used for manually adding
chunks paths using custom template for HtmlWebpackPlugin (default true
)The CSS chunks paths map is saved in htmlWebpackPlugin.files.cssHash
in your template. So if you want to manually add
CSS chunks map you can do (if you are using EJS):
1<script type="text/javascript"> 2 window.__CSS_CHUNKS__ = JSON.parse('<%= JSON.stringify(htmlWebpackPlugin.files.cssHash) %>') 3</script>
By default, it will inject script tag into <head>
. If you want to inject the script tag with window.__CSS_CHUNKS__
into <body>
set inject: 'body'
,
There is a basic example of usage in examples
You're free to contribute to this project by submitting issues and/or pull requests.
This project is licensed under MIT.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
Reason
Found 3/14 approved changesets -- score normalized to 2
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
security policy file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
Reason
111 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-06-30
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