Registry / devops / html-critical-webpack-plugin

html-critical-webpack-plugin

JSON →
library2.1.0jsnpmunverified

Webpack plugin wrapping the critical CSS inliner library (Addy Osmani's 'critical') to automatically extract and inline critical above-the-fold CSS from emitted HTML files. Version 2.1.0 works with Webpack 4/5 and requires Node >=6. It runs after all assets are emitted, making it compatible with HtmlWebpackPlugin and MiniCssExtractPlugin. Uses Puppeteer/Headless Chrome under the hood, so build environments must have necessary OS dependencies. Released sparingly with no recent activity; last version was published in 2019. Differentiates from other CSS inlining plugins by fully leveraging the 'critical' library's feature set (inline, extract, minify, penthouse config) and precise control over viewport dimensions.

devops
npm install html-critical-webpack-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · HTML-CRITICAL-WEBP
H
html-critical-webpack-plugin
devopsjavascriptv2.1.0
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

HtmlCriticalWebpackPlugin
✓ const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');
✗ import HtmlCriticalWebpackPlugin from 'html-critical-webpack-plugin';
Package does not ship ESM; only CommonJS via require(). This package is intended for Webpack config files which typically use CommonJS.

Full Webpack config showing how to use HtmlCriticalWebpackPlugin after HtmlWebpackPlugin and MiniCssExtractPlugin to inline critical CSS.

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin'); module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', filename: 'index.html', }), new MiniCssExtractPlugin({ filename: 'styles.css', }), new HtmlCriticalWebpackPlugin({ base: path.resolve(__dirname, 'dist'), src: 'index.html', dest: 'index.html', inline: true, minify: true, extract: true, width: 375, height: 565, penthouse: { blockJSRequests: false, }, }), ], };
Debug
Known issues
gotchaPlugin relies on Puppeteer/Headless Chrome, which requires system dependencies (libnss3, libx11-xcb1, etc.) that may not be present in minimal Docker or CI environments.
fix
Ensure your build environment has the necessary packages; see https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md
affects: >=1.0.0
gotchaThe plugin reads and writes files on disk (base/src/dest), not from Webpack's in-memory compilation. Ensure output files exist before this plugin runs.
fix
Place HtmlCriticalWebpackPlugin after HtmlWebpackPlugin and MiniCssExtractPlugin in the plugins array.
affects: >=1.0.0
deprecatedThe package has not been updated since 2019 and may not work with Webpack 5's persistent caching or other modern features.
fix
Consider alternatives like 'critters-webpack-plugin' or manually running the 'critical' package as a postbuild script.
affects: >=2.0.0
Errors
Common errors & fixes
Error: Cannot find module 'puppeteer'
Puppeteer is a dependency of 'critical' but not automatically installed in some environments.
fix
Run 'npm install puppeteer' or ensure your package manager installs peer dependencies.
ENOENT: no such file or directory, open '.../dist/index.html'
HtmlWebpackPlugin hasn't emitted the HTML file yet because of plugin ordering.
fix
Place HtmlCriticalWebpackPlugin after HtmlWebpackPlugin in the plugins array.
Upgrade
Version history
2.1.0latest on npm
Audit
Dependencies
criticalrequiredCore dependency that does all CSS extraction and inlining using Puppeteer/Headless Chrome.
Agent activity
4 hits · last 30 days
node
4
Resources
githubhttps://github.com/anthonygore/html-critical-webpack-plugin ↗
packagehttps://www.npmjs.com/package/html-critical-webpack-plugin ↗
html-critical-webpack-plugin — npm install html-critical-webpack-plugin · libregistry