webpack 图片路径问题

摘要：今天在学 webpack 时碰到一个问题，就是 webpack 通过插件 file-loader 打包图片后，在最终的 html 文件中图片地址是不对的，只有图片名称是对的，相信应该也有很多和我一样的初学者掉坑了。在 webpack.config.js 的配置文件中添加一个属性

今天在学 webpack 时碰到一个问题，就是 webpack 通过插件 file-loader 打包图片后，在最终的 html 文件中图片地址是不对的，只有图片名称是对的，相信应该也有很多和我一样的初学者掉坑了。

解决方法：

在 webpack.config.js 的配置文件中添加一个属性

{
  test: /\.(png|svg|jpg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        publicPath: './dist',
        name: '[name].[ext]'
      }
    }
  ]
}

就是加一个 options ，然后指定 publicPath 路径( html 中的最终路径)和 name 。其中 [name] 表示原图片的 name，[ext] 表示原图片的后缀，如 .jpg、png 等。

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7509