webpack 5不支持css tree shaking，需依赖purgecss-webpack-plugin或postcss的@fullhuman/postcss-purgecss插件实现；90%失效源于content路径配置错误，动态类名和第三方库必须通过safelist显式保留。
Webpack 5里PurgeCSS必须用插件，不是内置功能
Webpack 5本身不分析CSS类名是否被使用，import './button.css'这种语句默认视为有副作用，整份CSS会被无条件保留。真正起作用的是purgecss-webpack-plugin或PostCSS插件@fullhuman/postcss-purgecss，它们在构建阶段扫描源码字符串，再反向过滤CSS规则。
content路径配错，90%的“没生效”都卡在这一步
插件只从content配置列出的文件里提取类名，漏掉任何一类来源，对应样式就保不住。常见疏漏包括：
- Vue项目漏掉
./src/**/*.vue，导致class="btn-primary"没被扫到 - Next.js App Router项目没加
./app/**/*.{js,ts,jsx,tsx}，服务端组件里的class全丢失 - 写成
./src/*/*.js却没覆盖嵌套更深的./src/features/button/Button.tsx - Windows下用
glob.sync('./src/**/*.vue')路径解析失败，得改用path.join(__dirname, 'src', '**', '*.vue')
动态类名和第三方库必须靠safelist兜底
像className={`btn-${type}`}、class="hover:bg-blue-500"或react-datepicker__day这类运行时拼接或框架注入的类，静态扫描根本抓不到。不加白名单，上线后按钮变透明、动画消失是常态。
- Tailwind项目至少加：
safelist: [/^(hover|focus|group-hover|data)-/, /\[.*\]/] - Bootstrap用户补：
[/^btn-/, /^alert-/, /^modal-/] - Ant Design用户补：
['ant-btn', 'ant-table', 'ant-modal']，并确认这些字符串真实出现在你JSX里 - 别信
fontFace: true或keyframes: true能自动保动画——它们可能把整个@font-face块清空，要手动加正则保具体字体名
PostCSS方式更轻量，但有硬限制
如果你用PostCSS链（比如postcss.config.js），@fullhuman/postcss-purgecss确实不用动Webpack配置，适合快速验证。但它只处理当前CSS文件的上下文，无法跨入口做全局分析。
- 多页应用（MPA）或含多个CSS入口的项目，必须用
purgecss-webpack-plugin才可靠 - PostCSS方式要求CSS必须走
postcss-loader流程，如果只用css-loader，插件压根不触发 - 顺序不能错：
postcss-import→tailwindcss→@fullhuman/postcss-purgecss→autoprefixer→cssnano；错位会导致输出为空文件
safelist硬编码——后者一旦漏掉，线上样式崩塌不会报错，只会静默失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
