解决webpack5使用url-loader打包图片不显示问题

最近刚开始学习webpack，真是踩了一路的坑，一切都是因为webpack版本的不同。网上查的一些配置都是webpack4的配置，webpack4配置需要的模块可能到webpack5的时候就已经弃用了。
这里说明一下我用的版本是webpack5.7

webpack5打包图片的基本配置如下：
下图是处理背景图片的基本配置：
【注意】其实在webpack5的官网中url-loader，file-loader已经是弃用了的，如果还要使用这两个废弃了的文件的话，必须加上最后那一句type: ‘javascript/auto’,否则会出现一张图片打包两次，而且会出现背景图片不会显示到页面上的问题

 // 打包样式表的图片和字体文件
        rules:[
	        {
	          test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
	          loader:'url-loader',
	          options:{
	            publicPath: './image', // 相对打包后的index.html的图片位置
	            outputPath: 'image/', // 输出到build的目录image下
	            // 图片小于 10kb,会被 base64处理
	            limit: 10 * 1024,
	            // 解决：关闭url-loader的es6模块化，使用commonjs解析
	            esModule: false,
	            // 给图片重命名
	            name: '[name].[hash:6][ext]'
	          },
	           type: 'javascript/auto',
         ]
          

下图配置是负责处理html文件的img图片
webpack5中使用 html-withimg-loader代替html-loader

        {
            test: /\.html$/,
            // 处理html文件的img图片（负责引入img，从而能被url-loader处理）
            // webpack5中使用 html-withimg-loader代替
            loader: 'html-withimg-loader'
        },

上面两个配置完成之后，就能完美解决这个问题啦，图片显示成功截图如下：

希望这篇文章对你有所帮助哦，如果有问题欢迎在评论区留言~