跳到主要内容

Webpack 插件

tip

你可以在 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 指定入口点(entrypoints):

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