Webpack file loader输出两份相同SVG文件的问题排查

核心原因 #

大概率是你同时使用了Webpack5内置的asset资源模块和旧的file-loader，二者重复处理SVG文件导致生成两份输出；也可能是资源输出路径规则冲突，或是copy-webpack-plugin这类插件意外将文件复制到了dist根目录。

解决步骤 #

1. 移除重复的资源处理规则
   删除配置中针对SVG的file-loader规则，改用Webpack5推荐的asset模块处理：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.svg$/i,
           type: 'asset/resource',
           generator: {
             filename: 'assets/[name][ext]' // 指定输出到dist/assets目录
           }
         }
       ]
     }
   };
   

2. 统一资源输出路径配置
   如果全局配置了output.assetModuleFilename，确保它不会和单个rule里的generator.filename冲突。优先使用rule内的单独配置，避免全局规则覆盖预期路径。

3. 检查插件配置
   查看是否有copy-webpack-plugin这类插件，不小心将源SVG文件直接复制到dist根目录，如有则修改插件的patterns配置，将目标路径调整为assets/。

4. 修正HTML资源引用
   确保index.html里引用的是assets/name.svg而非根目录文件，配合html-webpack-plugin的话，Webpack会自动注入正确的资源路径。

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