PurgeCss Webpack Plugin 不输出未使用的 CSS，带有 purged: true

Question

I want to see what CSS has been purged with PurgeCss Webpack plugin, but for some reason the purged: true doesn't output it to the compilation-stats.json as described in the docs .

Here is my build command:

./node_modules/.bin/webpack --mode=production --progress --profile --color --config webpack.config.js  --json > compilation-stats.json

Any ideas on how to see the purged CSS?

Here is my webpack config:

var webpack = require("webpack");
const path = require("path");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyPlugin = require("copy-webpack-plugin");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");

const customExtractor = (content) => {
  const res = content.match(/[A-z0-9-:/]+/g) || [];
  return res;
};

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

const devMode = process.env.NODE_ENV !== "production";
var plugins = [];

plugins.push(
  new MiniCssExtractPlugin({
    filename: devMode ? "styles/[name].css" : "styles/[name].css",
    chunkFilename: devMode ? "styles/[name].css" : "styles/[name].css",
    ignoreOrder: false, // Enable to remove warnings about conflicting order
  }),
  new CopyPlugin({
    patterns: [
      { from: "src/scripts", to: "src/admin" }
    ],
  }),
  new PurgeCSSPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    safelist: ['open', 'open-mobile'],
    extractors: [
      {
        extractor: customExtractor,
        extensions: ["html", "js"],
      },
    ],
    rejected: true
  })
);

if (devMode) {
  console.log("Development mode!");
}

module.exports = {
  stats: "normal",
  entry: [__dirname + "/src/scripts.js"],
  output: {
    path: __dirname + "/dist",
    filename: "scripts/[name].js",
    sourceMapFilename: "scripts/[name].min.map",
  },
  watchOptions: {
    poll: 1000, // Check for changes every second
  },
  devtool: process.env.NODE_ENV === "dev" ? "eval" : false,
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
      {
        test: /\.s?[ac]ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              url: true,
              sourceMap: false,
            },
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: false,
            },
          },
        ],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              publicPath: "../images",
              outputPath: "images",
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|ttf|otf|eot)$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]",
              publicPath: "../fonts",
              outputPath: "fonts",
            },
          },
        ],
      },
    ],
  },
  optimization: {
    runtimeChunk: {
      name: "manifest",
    },
    splitChunks: {
      cacheGroups: {
        styles: {
          name: "styles",
          test: /\.css$/,
          chunks: "all",
          enforce: true,
        },
      },
    },
  },
  plugins: plugins,
};

package.jason

"devDependencies": {
    "@babel/core": "^7.12.3",
    "autoprefixer-loader": "^3.1.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.1.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "copy-webpack-plugin": "^6.3.0",
    "css-loader": "^5.0.1",
    "expose-loader": "^1.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "http-server": "^0.12.3",
    "imagemin": "^7.0.1",
    "img-loader": "^3.0.2",
    "jquery": "^3.5.1",
    "lodash": "^4.17.20",
    "mini-css-extract-plugin": "^1.2.1",
    "node-sass": "^5.0.0",
    "postcss-loader": "^4.0.4",
    "purgecss-webpack-plugin": "^3.0.0",
    "sass-loader": "^10.0.5",
    "select2": "^4.0.13",
    "source-map-loader": "^1.1.2",
    "style-loader": "^2.0.0",
    "svgo": "^1.3.2",
    "svgo-loader": "^2.2.1",
    "uglify-loader": "^3.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.4.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
}

Answer 1

I love finding the exact same issue I have on StackOverflow only to see it has absolutely no answers...

In any case, after looking at the code I believe there may be a bug in purgecss-webpack-plugin , or maybe this feature is just not implemented correctly, because I can't seem to tell how this information gets attached to the compilation stats at all.

It does however get attached to the instance of the PurgeCSSPlugin as purgedStats .

With that in mind, I wrote a workaround plugin that outputs the purged css to a separate file and can be used as a drop-in replacement until the issue, if there is one, is fixed.

const fs = require('fs');
const PurgeCSSPlugin = require("purgecss-webpack-plugin");

class PurgeCSSWriterPlugin {
  constructor({output = './purged-css.json', ...purgeCSSPluginOpts}) {
    this.output = output;
    this.rejected = purgeCSSPluginOpts.rejected;
    this.purgeCSSPlugin = new PurgeCSSPlugin(purgeCSSPluginOpts);
  }

  apply(compiler, ...args) {
    this.purgeCSSPlugin.apply(compiler, ...args);
    if(!this.rejected) {
      return;
    }
    compiler.hooks.done.tapPromise('PurgeCSSWriterPlugin', () => {
      // Write rejected css to output path
      return new Promise((res, rej) => {
        fs.writeFile(
          this.output,
          JSON.stringify(this.purgeCSSPlugin.purgedStats),
          (err, data) => (err ? rej(err) : res(data)),
        );
      });
    });
  }
}

Then replace PurgeCSSPlugin in your webpack config with this:

  new PurgeCSSWriterPlugin({
    paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
    safelist: ['open', 'open-mobile'],
    extractors: [
      {
        extractor: customExtractor,
        extensions: ["html", "js"],
      },
    ],
    rejected: true,
    output: path.resolve(__dirname, 'wherever/you/want.json'),
  })