PurgeCSS Webpack Plugin 使用手册

项目目录结构及介绍

PurgeCSS Webpack Plugin 是一个用于优化前端项目体积的插件，它通过从打包后的产物中移除未使用的 CSS 规则来实现减小 CSS 大小的目的。由于原始仓库已经归档，并且其文档可能有所变化或迁移，以下是基于一般情况下的结构和使用说明：

该插件的基本结构可能会包括以下核心部分：

• src: 包含主要的插件逻辑代码。
• example: 提供示例用法或者配置的演示。
• lib: 编译后或处理过的源代码存放处。
• test: 单元测试和集成测试相关文件。
• package.json: 包含依赖信息和脚本命令。
• README.md: 描述项目用途、安装方法和基本用法。

请注意，实际的项目结构可能会有所不同，尤其是随着时间的推移和版本更新。

项目的启动文件介绍

对于这类webpack插件，通常没有直接的“启动文件”供用户执行。它们的工作方式是在用户的webpack配置文件中被引入和配置。因此，用户的主要交互点在于他们的webpack.config.js或相关的配置文件中，通过实例化PurgeCSSPlugin并将其加入到webpack的plugins数组中来启动插件功能。

示例代码片段

// 在webpack.config.js中的示例配置
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
const path = require('path');
const glob = require('glob');

module.exports = {
    // ...其他webpack配置...
    plugins: [
        new PurgeCSSPlugin({
            paths: glob.sync(`${path.resolve(__dirname, 'src')}/**/*`, { nodir: true }),
        }),
    ],
};

项目的配置文件介绍

主要配置位于webpack配置文件内：

• paths: 指定要扫描以识别哪些CSS选择器正在被使用的文件路径。可以使用glob模式来匹配多文件。例如，通过glob.sync()函数获取所有源文件路径。

• 选项配置: PurgeCSS支持多种配置项，比如safelist用于指定不应被清理的CSS类名，only可限制仅对特定chunk进行CSS清理等。这些配置应当根据你的项目需求进行定制。

new PurgeCSSPlugin({
    paths: glob.sync(`${path.resolve(__dirname, 'src')}/**/*`, { nodir: true }), // 扫描的路径
    safelist: {
        // 可以是固定列表，也可以是正则表达式规则
        standard: ['do-not-remove'], // 不被移除的标准选择器
        deep: ['/deep-pattern/'], // 匹配深层次嵌套的选择器
        greedy: ['/greedy-pattern/'], // 匹配尽可能多的文本
    },
});

请参考最新的文档和插件版本，因为具体配置项可能会有变动。确保查看NPM页面或PurgeCSS中文文档站点获取最新使用指导。