跳到主要内容

Webpack 插件

提示

你可以在 webpack 配置中直接使用 webpack 插件,也可以在使用的 Webpack 的 postCSS 加载器(loader)时使用 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 插件中也可以使用,但是 csscontent 参数除外。

  • paths 参数

通过 webpack 插件,你可以通过设置文件名数组来指定由 purgecss 来分析的内容。这些内容可以是 html、pug、blade 等文件。你还可以使用类似 globglob-all 的模块来轻松获取文件列表。

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

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

如果要在每次编译时重新生成 paths 列表(例如,使用 --watch 时),则还可以将函数传递给 paths 参数,如下例所示:

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

您可以通过 only 参数为 purgecss-webpack-plugin 指定 chunk 名称:

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

// 在 webpack 配置中
new PurgeCSSPlugin({
safelist: collectSafelist,
});
  • rejected 参数

如果此参数被设置为 true,则所有被删除的选择器(selectors)都将被添加到 Stats Data 中并被标记为 purged