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

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

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

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

• only

你可以使用选项 only 将块名称指定给 purgecss-webpack-plugin

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

• safelist

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

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

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

• rejected

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