webpack 打包后图片路径变成了 [object Module] 的问题？

在前端开发中，使用 webpack 打包时经常会遇到图片路径变成 [object Module] 的问题，这是因为 webpack 使用相对路径导入图片时，返回的是一个模块对象而非图片路径。在这篇文章中，我们将深入探讨这个问题并提供一些指导意义。

为什么会出现这个问题？

打包后的代码中，图片资源被转换为模块对象而被加载。在 JavaScript 中，加载模块对象时会返回一个 object 类型，而不是像引用本地图片时的字符串类型。因此，在浏览器中引用打包后的图片资源时，返回的是 [object Module] 而非实际路径。

解决方案

方案一：通过配置 file-loader 加载图片

在 webpack.config.js 中，使用 file-loader 配置图片资源的加载方式。file-loader 会将图片文件打包为输出文件夹中的实际文件，并返回生成文件的路径（或 URL）。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images',
              publicPath: '../images',
            },
          },
        ],
      },
    ],
  },
};

name 指定输出文件的名称，outputPath 指定输出文件的路径，publicPath 指定浏览器访问文件的路径。

方案二：使用 url-loader 加载图片

url-loader 可以将图片文件打包为 base64 编码的字符串，这样可以减少对服务器的请求，提高页面加载速度。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[ext]',
              outputPath: 'images',
              publicPath: '../images',
            },
          },
        ],
      },
    ],
  },
};

limit 限制以 byte 为单位的最大资源大小，超过该大小就会使用 file-loader 进行打包；否则使用 base64 编码的字符串返回。

方案三：使用相对路径

在项目中，可以使用相对路径的方式来引用图片资源。相对路径是相对于当前文件所在的目录的路径，例如 '../images/logo.png'。相对路径方式需要注意组织结构和文件名的正确性，同时当组件嵌套层次变深时，相对路径的计算也会变得复杂，需要更多的考虑。

总结

以上就是解决 webpack 打包后图片路径变成了 [object Module] 的问题的三种方案。我们可以根据项目需要做出选择。不论我们选择哪种方案，我们都应该时刻注意良好的文件结构和文件名，以便在开发过程中正确引用和管理图片资源。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/659e660aadd4f0e0ff75dce8