webpack 打包图片出现两个压缩后的图片问题

335 阅读1分钟

webpack打包图片时遇到两个问题
一个是多生成了一个打包后的图片
一个是引用图片地址的问题
先说第一个问题 下面代码是我在webpack中使用file-loader的配置

1640337567(1).png 配置好以后,在打包的时候,我在url引入的图片在打包的时候会出现两个打包的图片
上代码 1640337761(1).png 使用的地方是

1640337854(1).png 原因是我使用的webpack5,在打包的时候,css-loader,会把css中的图片打包一份,解决办法时
上代码

1640337994(1).png 修改上面那个css-loader的配置后就可以解决那个问题了,css中的图片也可以正常显示了 另外一个问题
webpack中在js中引入图片要用require或者import的形式,不能直接用字符串的相对位置,因为字符串的相对位置在打包后找不到相应的位置
上代码

1640338287(1).png