webpack-critical-css-plugin

    0.0.2 • Public • Published

    Webpack critical css plugin

    About

    This is a Webpack plugin for generating critical css using penthouse. It creates a new file in the chunk with suffix .critical before file extension.

    Eg:

    Your output: styles.css

    New output: styles.critical.css

    Install

    yarn add --dev webpack-critical-css-plugin

    Usage

    In your webpack.config.js:

    const CriticalCssPlugin = require("webpack-critical-css-plugin");
     
     
    const criticalHTML = {
      yourChunk: "file:///" + path.join(__dirname, "example.com.html"), // local html file
      anotherChunk: "https://example.com" // live url
    };
     
    entry: {
      yourChunk: path.join(__dirname, "yourChunk"),
      anotherChunk: path.join(__dirname, "anotherChunk"),
      yetAnotherChunk: path.join(__dirname, "yetAnotherChunkChunk"),
      ...
    }
     
    plugins: [
      ...,
      new CriticalCssPlugin({
        criticalHTML
      }),
      ...,
    ]

    Author

    Mạnh Tài

    Keywords

    none

    Install

    npm i webpack-critical-css-plugin

    DownloadsWeekly Downloads

    22

    Version

    0.0.2

    License

    MIT

    Last publish

    Collaborators

    • manhtai