Webpack中联合使用image-webpack-loader与url-loader报错问题

看起来你遇到的问题是loader执行顺序搞反了，导致image-webpack-loader没有处理原始图片，反而把url-loader输出的模块代码当成图片编码了——你看到的那个奇怪的base64解码后其实是一段Webpack模块代码，自然在浏览器里显示不出来。

为什么会这样？ #

Webpack的loader执行顺序是**从右到左（从数组末尾到开头）**的。如果你的配置里把url-loader放在了image-webpack-loader后面，就会先执行url-loader，把图片转成了模块导出代码，然后image-webpack-loader去处理这段代码，最终就生成了错误的base64。

正确的配置示例 #

把loader顺序调整过来，让image-webpack-loader先处理原始图片（压缩优化），再让url-loader把优化后的图片转成base64：

module.exports = {
  module: {
    rules: [
      // 处理图片的规则
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          // 后执行：把压缩后的图片转成base64
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于8KB的图片转base64，可根据需求调整
              name: '[hash].[ext]', // 超过阈值的图片输出文件名格式
            },
          },
          // 先执行：压缩优化原始图片
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                quality: 80, // JPEG压缩质量
                progressive: true,
              },
              pngquant: {
                quality: [0.6, 0.8], // PNG压缩质量范围
              },
              // 其他图片格式的配置可按需添加
            },
          },
        ],
      },
      // 处理CSS的规则
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

验证步骤 #

1. 按照上面的配置修改你的webpack.config.js
2. 执行npm run build重新构建
3. 打开生成的style.css，你会看到base64变成了一段很长的字符串（正常图片的编码）
4. 在浏览器中打开页面，背景图片应该就能正常显示了

额外注意点 #

如果image-webpack-loader的压缩效果没生效，可能需要手动安装它的依赖插件：

npm install imagemin-mozjpeg imagemin-pngquant --save-dev

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