{"id":20099,"library":"html-critical-webpack-plugin","title":"HTML Critical Webpack Plugin","description":"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.","status":"maintenance","version":"2.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/anthonygore/html-critical-webpack-plugin","tags":["javascript","webpack","critical"],"install":[{"cmd":"npm install html-critical-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add html-critical-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add html-critical-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency that does all CSS extraction and inlining using Puppeteer/Headless Chrome.","package":"critical","optional":false}],"imports":[{"note":"Package does not ship ESM; only CommonJS via require(). This package is intended for Webpack config files which typically use CommonJS.","wrong":"import HtmlCriticalWebpackPlugin from 'html-critical-webpack-plugin';","symbol":"HtmlCriticalWebpackPlugin","correct":"const HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');"}],"quickstart":{"code":"const path = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');\nconst MiniCssExtractPlugin = require('mini-css-extract-plugin');\nconst HtmlCriticalWebpackPlugin = require('html-critical-webpack-plugin');\n\nmodule.exports = {\n  mode: 'production',\n  entry: './src/index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.css$/,\n        use: [MiniCssExtractPlugin.loader, 'css-loader'],\n      },\n    ],\n  },\n  plugins: [\n    new HtmlWebpackPlugin({\n      template: './src/index.html',\n      filename: 'index.html',\n    }),\n    new MiniCssExtractPlugin({\n      filename: 'styles.css',\n    }),\n    new HtmlCriticalWebpackPlugin({\n      base: path.resolve(__dirname, 'dist'),\n      src: 'index.html',\n      dest: 'index.html',\n      inline: true,\n      minify: true,\n      extract: true,\n      width: 375,\n      height: 565,\n      penthouse: {\n        blockJSRequests: false,\n      },\n    }),\n  ],\n};","lang":"javascript","description":"Full Webpack config showing how to use HtmlCriticalWebpackPlugin after HtmlWebpackPlugin and MiniCssExtractPlugin to inline critical CSS."},"warnings":[{"fix":"Ensure your build environment has the necessary packages; see https://github.com/puppeteer/puppeteer/blob/main/docs/troubleshooting.md","message":"Plugin relies on Puppeteer/Headless Chrome, which requires system dependencies (libnss3, libx11-xcb1, etc.) that may not be present in minimal Docker or CI environments.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Place HtmlCriticalWebpackPlugin after HtmlWebpackPlugin and MiniCssExtractPlugin in the plugins array.","message":"The 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Consider alternatives like 'critters-webpack-plugin' or manually running the 'critical' package as a postbuild script.","message":"The package has not been updated since 2019 and may not work with Webpack 5's persistent caching or other modern features.","severity":"deprecated","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run 'npm install puppeteer' or ensure your package manager installs peer dependencies.","cause":"Puppeteer is a dependency of 'critical' but not automatically installed in some environments.","error":"Error: Cannot find module 'puppeteer'"},{"fix":"Place HtmlCriticalWebpackPlugin after HtmlWebpackPlugin in the plugins array.","cause":"HtmlWebpackPlugin hasn't emitted the HTML file yet because of plugin ordering.","error":"ENOENT: no such file or directory, open '.../dist/index.html'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}