webpack.md

title	lang	meta
Webpack	en-US	name content description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with webpack with a plugin. itemprop content description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with webpack with a plugin. property content og:url https://purgecss.com/plugins/webpack property content og:site_name purgecss.com property content og:type website property content og:image https://i.imgur.com/UEiUiJ0.png property content og:locale en_US property content og:title Remove unused CSS - PurgeCSS property content og:description PurgeCSS is a tool for removing CSS that you're not actually using in your project. You can use it with webpack with a plugin.

Webpack

:::tip You can use either the Webpack plugin directly in your webpack configuration or use the PostCSS plugin when you are using the Webpack postCSS loader. :::

Installation

npm i purgecss-webpack-plugin -D

Usage

With mini-css-extract-plugin

const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgecssPlugin = require("purgecss-webpack-plugin");

const PATHS = {
  src: path.join(__dirname, "src"),
};

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "dist"),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    new PurgecssPlugin({
      paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    }),
  ],
};

Multiple paths

If you need multiple paths use the npm package glob-all instead of glob, then you can use this syntax:

new PurgecssPlugin({
  paths: glob.sync([
    // ...
  ])
}),

to filter out directories see the glob-all documentation here.

Options

The options available in purgecss Configuration are also available in the webpack plugin, with the exception of the css and content options.

• paths

With the webpack plugin, you can specify the content that should be analyzed by purgecss by providing an array of filenames. These can be html, pug, blade, ... files. You can also use a module like glob or glob-all to easily get a list of files.

You likely need to pass { noDir: true } as an option to glob.sync() as glob.sync is matching a dir which the plugin can't operate on.

const PurgecssPlugin = require("purgecss-webpack-plugin");
const glob = require("glob");
const PATHS = {
  src: path.join(__dirname, "src"),
};

// In the webpack configuration
new PurgecssPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

If you want to regenerate the list of paths on every compilation (e.g. when using --watch), then you can also pass a function to the paths option as in the following example:

new PurgecssPlugin({
  paths: () => glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

• only

You can specify chunk names to the purgecss-webpack-plugin with the option only:

new PurgecssPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
  only: ["bundle", "vendor"],
});

• safelist

Similar as for the paths option, you also can define a function for this option:

function collectSafelist() {
  return {
    standard: ["safelisted", /^safelisted-/],
    deep: [/^safelisted-deep-/],
    greedy: [/^safelisted-greedy/],
  };
}

// In the webpack configuration
new PurgeCSSPlugin({
  safelist: collectSafelist,
});

• rejected

When this option is set to true all removed selectors are added to the Stats Data as purged.