为何需在PurgeCSS配置中指定paths或content参数？

算力阿峰

2026-8-6

为什么PurgeCSS需要手动指定paths/content，而不能直接用Webpack打包文件？

核心原因其实是PurgeCSS的工作逻辑和Webpack的打包流程完全不在一个频道上，具体说有这几个关键点：

打包产物已经丢失了原始选择器信息
Webpack打包时会做压缩、混淆，甚至通过CSS Modules把类名改成随机字符串（比如btn-primary变成_3x3k2）。PurgeCSS要做的是匹配原始CSS里的选择器和代码里用的类名，要是拿打包后的文件来扫，根本对应不上原来的CSS规则，等于白忙活。
Webpack管不到所有需要扫描的文件
比如项目根目录public下的静态HTML、静态模板文件，Webpack不会把这些当作模块去解析，但这些文件里的类名、标签选择器是需要PurgeCSS识别的。要是不手动指定路径，PurgeCSS根本不知道这些文件存在，会直接把相关CSS删掉。
动态类名需要扫描原始代码才能识别
比如你在JSX里写className={btn-${status}}，打包后会变成具体的btn-active或btn-disabled，但PurgeCSS需要从原始代码里识别出btn-这个前缀，才能保留所有btn-开头的CSS规则。要是只看打包后的产物，它只会保留当前打包用到的那个具体类，其他同前缀的CSS会被误删。
Webpack的打包是流式处理，没有完整的"全量文件"给PurgeCSS用
Webpack是按模块一步步编译打包的，过程中不会把所有文件的内容整合在一起给插件用。PurgeCSS需要一次性扫描所有可能用到选择器的文件，才能准确判断哪些CSS该删，所以必须手动指定要扫的文件路径。