问题：利用webpack5.0以上版本进行背景图片打包，会出现打包图片重复的问题，并且背景图片无法正常显示.

测试过的正常配置如下：

webpack.config.js

const { resolve } = require('path')
module.exports = {mode: 'development',entry: './src/index.js',output: {path: resolve(__dirname, 'dist'),filename: 'index.js'},module: {rules: [{test: /\.(png|jpg|gif)$/i,use: [{loader: 'url-loader',options: {limit: 15000,//文件大小限制，小于则用base64编码esModule: false //关闭es模块语法}}],type: 'javascript/auto'},{test: /\.css$/i,use: ["style-loader", "css-loader"]}]}
}

package.json:

{"name": "webpack_test","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"css-loader": "^6.2.0","file-loader": "^6.2.0","style-loader": "^3.2.1","url-loader": "^4.1.1","webpack": "^5.48.0","webpack-cli": "^4.7.2"}
}

背景图片参数：

问题探究：

当图片文件的大小小于limit属性值时，打包后的css会生成以base64编码的图片，当图片文件的大小大于limit属性时，打包后是会生成相应文件的。

为什么会出现打包后的图片资源重复的问题？并且有一个图片正常，有一个是base64编码的图片，而这个base64编码的图片却是打包后的css的background的url中引用的。也正是由于打包后引用了这个base64编码的非正常图片,所以导致了打包后的背景图片无法正常显示。

根据webpack的官方文档，可知，webpack5以后，使用资源模块（asset module)，它允许使用资源文件，而无需配置额外的loader。详情如下

因此会出现重复图片的问题在于：

我们在webpack5.0中使用了旧的资源模块加载器，如file-loader,url-loadre这些，但是webpack5.0本身已经内置了asset资源模块来处理，这就可能会导致asset重复。

解决方法：将asset的模块类型设置为

type: 'javascript/auto'

这样处理之后，打包后图片重复的问题可以解决。

但是，此时背景图片依然无法正常显示

原因为：url-loader,file-loader都是采用es6语法规范的，而不是commonjs规范

由于url-loader,file-loader中可以通过esModule属性来选择是否关闭es6语法规范，

故解决方法为添加如下语句关闭es6语法规范：

 esModule: false

通过以上两步可以成功解决问题：

其实，如果install的是webpack5.0的话，正如前文所言，已经废弃了assert loader,(如 file-loader, url-loader等），就不需要那么麻烦，去相方设法配置版本的兼容性问题。可以直接如下操作，测试过也能正常在浏览器上显示背景图片。

网上绝大多数的教程都是比较老的教程，安装时应该注意版本的兼容。在以后的学习，

希望自己要谨记一定要多看官方文档，官方文档，官方文档

webpack5.0中打包css背景图片生成重复，不能显示的问题考究相关推荐

CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
电脑桌面怎么设置html背景图,css中如何设置背景图片？
在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片.那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片. css怎样设置背景图片? css back ...
html中图片太大了,css背景图片太大的坏处与解决方法
在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...
webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
Vue中如何设置背景图片
在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: backgroun ...
css背景图片、圆角、盒子阴影、浮动
一.css背景图片 1.概述背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...
完美的css背景图片全屏显示，能比例缩小，不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...

webpack5.0中打包css背景图片生成重复，不能显示的问题考究