webpack file-loader输出损坏图片求助：Sass路径替换正常但图片损坏

我来帮你排查这个file-loader输出图片损坏的问题，结合你描述的情况——Sass里的URL替换正常但图片文件损坏，大概率是配置兼容性、路径匹配或者文件处理流程的问题，给你几个具体的排查方向和解决方案：

1. 检查file-loader的路径配置（最常见原因） #

因为你的ExtractTextPlugin把CSS输出到根目录的bundle.css，所以file-loader生成的图片URL需要是相对于CSS文件的路径，如果publicPath配置错误，不仅可能导致页面上图片加载失败，甚至可能在webpack写入文件时出现路径混乱，导致文件损坏。

调整file-loader的配置，确保publicPath和outputPath匹配：

{
  test: /\.(png|jpe?g|gif)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'images/css-urls/', // 图片输出到这个目录
        publicPath: '../images/css-urls/', // CSS里引用图片的相对路径（因为bundle.css在根目录，所以要往上跳一级找images）
        esModule: false // 关闭ES模块导出，避免和旧插件兼容问题
      }
    }
  ]
}

2. 排查是否存在重复的图片处理规则 #

如果你的webpack配置里有多个针对图片文件的loader（比如同时配置了url-loader和file-loader），可能会导致图片被多次编码处理，最终损坏。检查你的module.rules，确保只有file-loader处理图片文件，去掉多余的规则。

3. 替换废弃的ExtractTextPlugin #

注意ExtractTextPlugin已经被官方废弃了，webpack 4及以上版本推荐使用mini-css-extract-plugin，它和最新版file-loader的兼容性更好，很多旧插件的奇怪问题换这个就能解决。

替换步骤： #

1. 安装插件：

npm install mini-css-extract-plugin --save-dev

2. 修改webpack配置：

// 替换原来的ExtractTextPlugin引用
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

var mainConfig = {
  entry: {
    "app": [ "./app/main.ts", "./static/scss/main.scss" ],
    "vendor": "./a..." // 你的vendor入口
  },
  plugins: [
    // 替换成MiniCssExtractPlugin实例
    new MiniCssExtractPlugin({
      filename: './bundle.css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.scss$/,
        // 替换原来的ExtractTextPlugin.extract，直接用MiniCssExtractPlugin.loader
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      // 上面调整好的file-loader配置
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/css-urls/',
              publicPath: '../images/css-urls/',
              esModule: false
            }
          }
        ]
      }
    ]
  }
};

4. 清理输出目录后重新构建 #

有时候旧的损坏文件没有被完全覆盖，导致看起来新生成的文件还是坏的。先手动删除你的输出目录（比如dist或者包含images/css-urls的目录），然后重新运行webpack构建命令，看看问题是否解决。

如果上面的方法都没解决，把完整的webpack配置贴出来，我可以帮你更精准地定位问题。

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