Webpack

提示

你可以直接在 Webpack 配置中使用 Webpack 插件，或者在使用 Webpack PostCSS 加载器时使用 PostCSS 插件。

安装

npm i purgecss-webpack-plugin -D

使用

与 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 }),
    }),
  ],
};

多个路径

如果你需要多个路径，请使用 npm 包 glob-all 替代 glob，然后你可以使用以下语法：

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

要过滤目录，请参阅 glob-all 文档这里。

选项

PurgeCSS 配置中可用的选项在 Webpack 插件中也可用，但 css 和 content 选项除外。

使用 Webpack 插件时，你可以通过提供文件名数组来指定 PurgeCSS 应分析的内容。这些可以是 HTML、Pug、Blade 等文件。你还可以使用 glob 或 glob-all 等模块轻松获取文件列表。

你可能需要传递 { noDir: true } 作为 glob.sync() 的选项，因为 glob.sync 匹配的是目录，而插件无法处理。

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

// 在 Webpack 配置中
new PurgeCSSPlugin({
  paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true }),
});

如果你希望在每次编译时重新生成路径列表（例如在使用 --watch 时），则可以将函数传递给 paths 选项，如下例所示：

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

你可以使用 only 选项指定 PurgeCSS Webpack 插件的块名称：

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

与 paths 选项类似，你也可以为此选项定义一个函数：

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

// 在 Webpack 配置中
new PurgeCSSPlugin({
  safelist: collectSafelist,
});

当此选项设置为 true 时，所有已删除的选择器都将作为 purged 添加到 Stats 数据中。