Rspack CssExtractPlugin提取CSS异常：生成文件含HTML代码

问题描述 #

配置CssExtractPlugin的filename和chunkFilename选项后，生成的部分CSS文件未包含预期的CSS代码，反而混入了html-webpack-plugin所用template.html中的HTML内容；不指定这两个选项时，CSS文件生成正常，内容正确。受影响页面的对应CSS文件全是HTML内容，导致页面导入的样式无法加载，仅未在该文件导入的bootstrap样式生效。

排查与解决方案 #

1. 隔离CSS与HTML的输出路径 #

CSS和HTML输出路径重叠可能导致文件内容被覆盖，给CSS文件单独指定子目录：

const cssExtract = new CssExtractPlugin({
  filename: 'css/[name].[contenthash].css',
  chunkFilename: 'css/[id].[name].[contenthash].css',
});

同时调整HTML插件的输出路径，避免冲突：

new HtmlRspackPlugin({
  template: 'template.html',
  filename: 'html/[name].html',
})

2. 升级Rspack相关依赖 #

旧版本Rspack的CssExtractPlugin可能存在文件名模板解析bug，升级到最新稳定版：

npm update @rspack/core @rspack/plugin-css-extract

3. 验证加载器配置正确性 #

确保CssExtractPlugin.loader在加载器数组最前端，且type: 'javascript/auto'配置正确（当前你的加载器配置顺序符合要求，可保留）。

临时替代方案 #

若上述方法未解决问题，可暂时不指定filename和chunkFilename，使用插件默认命名规则，待问题彻底排查后再调整。

内容的提问来源于stack exchange，提问作者Sai Darshan