webpack 打包后 图片名称不一致导致页面上图片404问题

webpack 打包后 图片名称不一致导致页面上图片404问题

webpack 中使用 html-loader (| html-withimg-loader) 和 html-webpack-plugin时,打包后,image文件夹中图片的名字被转化,但是index.html img src使用的图片名字名字仍然是打包前图片的名字

打包后图片的名字:

打包后html 中引入的名字:
在这里插入图片描述

导致页面图片404了

解决 原来是需要再url-loader中进行一下图片名字的配置就可以了
在这里插入图片描述

另外:
webpack 默认不支持在html中使用 img src引用图片的,所以需要另外使用插件或者loader进行配置(这里"html-withimg-loader" 和 “html-loader”都进行了尝试)
前提: 确定使用哪一个后,需要进行 npm install xxx

{
   test: /\.(htm|html)$/i,
   use: ["html-withimg-loader"]
 }

或者

{
   test: /\.(htm|html)$/,
   use: {
     loader: 'html-loader',
     options: {
       attrs: [':data-src', ":src"]
     }
   }
 }

配置后,就可以在页面中使用了。

虽然解决了问题,但是仍有疑问如下:

奇怪,我之前使用过html-withimg-loader,没有出现过这个问题,并且我现在的代码跟之前的代码是一样的。后来经过查询原来是使用的babel版本导致的问题
我现在使用的是babel7版本了,之前用的是老版本。如图:
在这里插入图片描述在这里插入图片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章