webpack使用file-loader时dist根目录生成额外冗余文件如何解决

问题原因 #

你遇到的生成双倍文件、样式引用错误的问题，核心是两个配置冲突导致：

1. file-loader 6.x版本默认开启ES模块导出，配合css-loader处理样式内url资源时，会把资源导出模块单独打包为带hash的额外文件
2. 若你使用的是webpack 5版本，其默认自带的asset/resource资源处理能力没有被禁用，会和file-loader同时处理图片类资源，产生两份输出文件

解决方案 #

方案1：使用webpack5原生Asset Module（推荐，无需额外依赖file-loader） #

直接替换你原有的图片处理规则即可：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'asset/resource',
  generator: {
    filename: 'images/[name][ext]',
    publicPath: '../' // 适配css文件输出在css/文件夹的场景，保证路径引用正确
  }
}

替换后所有图片会统一输出到dist/images/目录，样式内引用路径会自动生成为url(../images/xxx.svg)，不会产生额外冗余文件。

方案2：保留file-loader的修改方式 #

修改原有file-loader配置，添加两个参数解决冲突：

{
  test: /\.(png|jpe?g|gif|svg)$/i,
  type: 'javascript/auto', // 禁用webpack5默认的资源处理逻辑，避免重复打包
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
    outputPath: 'images',
    publicPath: '../images', // 修正css文件引用图片的相对路径
    esModule: false, // 关闭ES模块导出，避免生成额外的导出文件
  },
}

方案3：配合copy-webpack-plugin使用的修改方式 #

如果你更倾向用copy-webpack-plugin处理静态资源复制，只需修改css-loader配置，关闭其对url路径的自动处理即可：

{
  loader: 'css-loader',
  options: { 
    sourceMap: true,
    url: false // 禁用css-loader自动处理url路径，保留你写的原始路径
  }
},

修改后你在sass里直接写相对打包后css文件的路径即可，比如background: url(../images/loading.svg)，webpack不会再处理该路径也不会生成额外冗余文件。

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