解决 Webpack 构建过程中压缩图片会导致 404 错误的问题-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，使用 Webpack 进行构建已经成为了常态。在 Webpack 的构建过程中，我们通常会使用一些插件来优化构建效率和资源体积。其中，压缩图片是一个常见的优化手段。然而，在使用图片压缩插件时，我们可能会遇到一个问题，即构建完成后，使用压缩后的图片时会出现 404 错误。本文将介绍如何解决这个问题。

问题分析

为了更好地理解这个问题，我们先来看一下 Webpack 中图片压缩的处理流程。通常情况下，我们会使用 image-webpack-loader 这个插件来实现图片压缩。这个插件会将图片文件传递给 imagemin 这个库进行压缩，然后将压缩后的文件输出到指定的目录中。在输出文件时，Webpack 会将文件名进行哈希处理，以防止文件名重复。

然而，我们在使用 url-loader 或 file-loader 时，通常会将图片文件嵌入到打包后的 JS 文件中，或者将图片文件输出到指定的目录中。这时，Webpack 会将图片文件的路径进行哈希处理，并在打包后的 JS 文件或 HTML 文件中引用这个路径。这就出现了一个问题：由于哈希处理的文件名不同，而压缩后的文件名没有进行哈希处理，因此在使用压缩后的图片时会导致 404 错误。

解决方案

为了解决这个问题，我们需要让压缩后的图片文件名也进行哈希处理。这可以通过 webpack-md5-hash 这个插件来实现。这个插件可以在 Webpack 打包过程中生成一个哈希值，并用这个哈希值来给输出的文件名加上哈希前缀。这样，无论是 JS 文件还是图片文件，它们的文件名都会包含相同的哈希前缀，从而避免了 404 错误的问题。

下面是一个使用 webpack-md5-hash 插件的示例配置：

// javascriptcn.com 代码示例
const webpack = require('webpack');
const WebpackMd5Hash = require('webpack-md5-hash');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[name].[hash].[ext]'
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: {
                progressive: true,
                quality: 65
              },
              optipng: {
                enabled: false,
              },
              pngquant: {
                quality: [0.65, 0.9],
                speed: 4
              },
              gifsicle: {
                interlaced: false,
              },
              webp: {
                quality: 75
              }
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html'
    }),
    new webpack.HashedModuleIdsPlugin(),
    new WebpackMd5Hash()
  ],
};

在这个配置中，我们使用了 file-loader 和 image-webpack-loader 两个插件来处理图片文件。其中，file-loader 用于将图片文件输出到指定的目录中，并将文件名加上哈希前缀。image-webpack-loader 用于将图片文件传递给 imagemin 进行压缩，并输出到指定的目录中。在这个配置中，我们还使用了 webpack-md5-hash 插件来生成哈希值，并将这个哈希值用于给输出的文件名加上哈希前缀。

总结

在使用 Webpack 进行构建时，图片压缩是一个常见的优化手段。然而，在使用图片压缩插件时，我们可能会遇到 404 错误的问题。这是因为在使用哈希处理的文件名时，压缩后的文件名没有进行哈希处理，导致在使用压缩后的图片时会出现 404 错误。为了解决这个问题，我们可以使用 webpack-md5-hash 插件来给压缩后的图片文件名加上哈希前缀。这样，就可以避免出现 404 错误的问题。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6508a91795b1f8cacd3a2c80