PurgeCSS Webpack 插件

安装

npm install purgecss-webpack-plugin

基本使用

const path = require('path')
const glob = require('glob-all')
const PurgecssPlugin = require('purgecss-webpack-plugin')

module.exports = {
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, 'src/**/*.html'),
        path.join(__dirname, 'src/**/*.js')
      ])
    })
  ]
}

配置选项

paths

  • 类型：string[] | { raw: string, extension: string }[]
  • 描述：要分析的文件路径数组。推荐使用 glob 或 glob-all 库来匹配文件。

only

  • 类型：string[]
  • 描述：仅处理指定的入口点。

safelist

  • 类型：string[] | { standard?: string[], deep?: string[], greedy?: string[] }
  • 描述：要保留的选择器列表。

blocklist

  • 类型：string[]
  • 描述：要删除的选择器列表。

extractors

  • 类型：Array<{ extractor: Function, extensions: string[] }>
  • 描述：自定义提取器，用于从特定文件类型中提取选择器。

keyframes

  • 类型：boolean
  • 默认值：false
  • 描述：是否删除未使用的关键帧。

fontFace

  • 类型：boolean
  • 默认值：false
  • 描述：是否删除未使用的字体。

完整示例

const path = require('path')
const glob = require('glob-all')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css'
    }),
    new PurgecssPlugin({
      paths: glob.sync([
        path.join(__dirname, 'src/**/*.html'),
        path.join(__dirname, 'src/**/*.js'),
        path.join(__dirname, 'src/**/*.vue')
      ]),
      safelist: {
        standard: ['body', 'html'],
        deep: [/^dropdown-/],
        greedy: [/^bg-/]
      },
      keyframes: true,
      fontFace: true
    })
  ]
}

注意事项

  • 确保安装 glob 或 glob-all 库
  • 与 mini-css-extract-plugin 配合使用效果最佳
  • 在生产构建中使用可显著减小 CSS 文件大小

相关链接