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 插件中也可以使用,但是 css
和 content
参数除外。
paths 参数
通过 webpack 插件,你可以通过设置文件名数组来指定由 purgecss 来分析的内容。这些内容可以是 html、pug、blade 等文件。你还可以使用类似 glob
或 glob-all
的模块来轻松获取文件列表。
You likely need to pass
{ noDir: true }
as an option toglob.sync()
asglob.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 参数
您可以通过 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
。