如何编写插件自动在WebpackVite构建中合并CSS模块冗余？

本文共计846个文字，预计阅读时间需要4分钟。

无需自定义插件即可实现自动扫描和合并冗余、CSS和模块。现代构建工具本身已内置机制处理此类问题，关键在于配置方式和引入路径是否符合规范。

Webpack：靠 MiniCssExtractPlugin + 模块图收口

Webpack 不会主动“扫描”文件系统找 CSS，而是依赖 JS 入口的 import 语句把样式纳入模块图。只要所有 CSS 都通过 import './xxx.css' 引入，MiniCssExtractPlugin 就能统一提取、去重、合并。

• 关掉 style-loader，启用 MiniCssExtractPlugin.loader，否则样式仍嵌在 JS 里
• 确保所有 CSS 文件都被某个 JS 模块 import 过，HTML 中的 <link> 不会被识别
• 多个入口（如 main.ts、admin.ts）各自 import 相同 CSS，会生成两份合并结果；若想复用，需将共用样式抽成单独 chunk，用 splitChunks 配置 cacheGroups 显式指定 name 和 filename
• 类名重复不是“冗余模块”，而是 CSS 层叠问题；真正冗余的是未被任何 import 触达的孤立 CSS 文件——这类文件根本不会参与构建，也无需插件扫描

Vite：静态 import 默认合并，动态 import 才分块

Vite 在构建时自动收集所有 静态 import 的 CSS，并按入口打包进单个 CSS 文件（如 main.css）。它不扫描目录，只分析 AST 中的 import 语句。