在前端开发中，使用 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 插件的示例配置：
-- -------------------- ---- -------
----- ------- - -------------------
----- -------------- - ----------------------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
----- ----------------------- -------
--
------- -
------ -
-
----- -------------------
---- -
-
------- --------------
-------- -
----- ----------------------------
-
--
-
------- -----------------------
-------- -
-------- -
------------ -----
-------- --
--
-------- -
-------- ------
--
--------- -
-------- ------ -----
------ -
--
--------- -
----------- ------
--
----- -
-------- --
-
--
--
--
--
--
--
-------- -
--- ---------------------
--- -------------------
--------- -------------------
--------- ------------
---
--- --------------------------------
--- ----------------
--
--在这个配置中，我们使用了 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