Extracts & inlines Critical CSS with Webpack

$ npm install webpack-critical --save-dev

Important: You must also install & configure html-webpack-plugin!

// webpack.config.js
const { resolve } = require('path');
const HTML = require('html-webpack-plugin');
const WebpackCritical = require('webpack-critical');
const dist = resolve('build');
module.exports = {
  output: {
    path: dist
  },
  // ...
  plugins: [
    new HTML({ ... })
    new WebpackCritical({
      context: dist,
      ignore: [/bootstrap/, '@font-face']
    })
  ]
}

Type: String
Default: process.cwd()

The directory context to search for your (built) stylesheet.

Note: In most cases, this should match your output.path value.

Type: String, RegExp, Function, or Array
Default: ['@font-face', /import/, /url\(/]

Patterns to ignore CSS styles or files. Refer to filter-css for more information.

Type: String
Default: null

The filename or filepath (relative to context) of a specific CSS stylesheet to use for inlining.

If no value is passed, the primary CSS asset is used (as determined by html-webpack-plugin). If you are extracting a stylesheet, this will be the correct value 99% of the time.

Inspired by Dan Denny's article on Building a Small PWA with Preact and Firebase, which lead me to take a much closer look at critical, maintained by Addy Osmani and Ben Zörb.

MIT © Luke Edwards