css-loader 不负责删除未用 CSS 类，PurgeCSS 才实现该功能；需禁用 CSS Modules、配合 MiniCssExtractPlugin 提取 CSS，并配置 content 和 safelist 以支持动态类名和 scoped style，且仅在生产环境启用。
css-loader 本身不负责删除未使用的 CSS 类名，它只做样式解析和模块化处理；真正实现“摇掉无用 CSS”的是 PurgeCSS（或其 webpack 封装插件），而 css-loader 需要与之协同工作，确保样式能被正确提取、分析和裁剪。
确保 css-loader 输出原始 CSS 字符串
PurgeCSS 依赖从构建产物中读取最终的 CSS 内容，因此 css-loader 不能启用 CSS Modules 或自动 scope 处理（除非你明确配置保留规则）。关键配置点：
- 禁用 localIdentName 或设为默认值，避免类名被哈希重命名导致匹配失败
- 关闭 modules: true（除非你使用 CSS Modules 且已配置 safelist 兼容 scoped 类）
- 保持 importLoaders 合理（如处理 @import 或 postcss 插件），但不要让 css-loader 提前压缩或转换选择器
配合 MiniCssExtractPlugin 提取独立 CSS 文件
PurgeCSS 需要操作真实的 CSS 文件内容，所以必须先把样式从 JS 中抽离出来。MiniCssExtractPlugin 是标准方案：
- 在 production 环境下，用 MiniCssExtractPlugin.loader 替代 style-loader
- 确保 css-loader 在它之前执行，顺序为：
[MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] - 生成的
.css文件会被 PurgeCSS 插件扫描并清理
配置 PurgeCSS 插件识别所有模板中的类名
css-loader 不参与选择器提取，这部分由 PurgeCSS 的 content 字段完成。必须覆盖所有可能使用 CSS 类的地方：
立即学习“前端免费学习笔记（深入）”；
- content 列表需包含所有 HTML、Vue、JSX、TSX、Svelte、Astro 等模板路径
- 例如：
['./src/**/*.{html,vue,jsx,tsx,svelte,astro}'] - 若项目含动态类名（如拼接字符串：
class="btn btn--${type}"），需加入 safelist 正则，如/^btn--/ - Vue 的 scoped style 中带
data-v-xxx属性，必须显式保留在 safelist 中：[/^data-v-/]
开发环境慎用，避免热更新失效
PurgeCSS 是生产阶段优化手段，开发时启用会导致样式丢失：
- 通过
process.env.NODE_ENV === 'production'控制是否启用 PurgeCSSPlugin - 不要在 dev 模式下运行它，否则 HMR 更新后新类名不会被识别，样式立即消失
- 可搭配
watchOptions或devServer.overlay做辅助提示，但核心是关掉开发期裁剪
