webpack 图片路径问题小白知识_图片基础入门

今天在学 webpack 时碰到一个问题,就是 webpack 通过插件 file-loader 打包图片后,在最终的 html 文件中图片地址是不对的,只有图片名称是对的,相信应该也有很多和我一样的初学者掉坑了。解决方法:在 webpack.config.js 的配置文件中添加一个属性{test: /\.(png|svg|jpg)$/,use: [{loa

webpack 图片路径问题小白知识

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

webpack 图片路径问题小白知识_图片基础入门

解决方法:

在 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 等。

海计划公众号
(0)
上一篇 2020/03/20 06:50
下一篇 2020/03/20 06:50

您可能感兴趣的内容