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版本了,之前用的是老版本。如图: