Wondering what’s next for npm?Check out our public roadmap! »

    webpack-critical

    1.1.1 • Public • Published

    webpack-critical

    Extracts & inlines Critical CSS with Webpack

    Install

    $ npm install webpack-critical --save-dev
    

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

    Usage

    // 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']
        })
      ]
    }

    API

    WebpackCritical(options)

    options.context

    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.

    options.ignore

    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.

    options.stylesheet

    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.

    Credit

    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.

    License

    MIT © Luke Edwards

    Keywords

    none

    Install

    npm i webpack-critical

    DownloadsWeekly Downloads

    10

    Version

    1.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar