解决webpack5打包html中图片后图片无法显示问题

错误代码如下：

	//loader的配置
	module: {
		rules: [{
				test: /\.(png|svg|jpg|jpeg|gif)$/,
				loader: 'url-loader',
			},
			{ test: /\.html$/,loader: 'html-loader' }
		]
	},

此时打包好的html文件中的img标签路径（为错误路径）：

解决方案

------在尚硅谷的webpack5视频教程中有讲到，因为url-loader默认使用es6模块化进行解析，而html-loader使用的是commonjs进行解析，所以url-loader解析时会出错（见上面错误路径图片）。

方案一代码：

			{
				test: /\.(png|svg|jpg|jpeg|gif)$/,
				loader: 'url-loader',
				//禁用掉es模块
				options: { esModule: false }
			},
			//注意！！！！！！！！！！！！！！！！！！！！！！
			//此处使用webpack5支持的 "html-withimg-loader"，
			//如使用 "html-loader"，就算禁用了es模块还是会没用
			{ test: /\.html$/, loader: 'html-withimg-loader' }

成功后图片，可与上面的错误路径图片进行对比。

方案二代码:
使用webpack官方文档提供的方法，官方方法位置：指南—>管理资源—>加载images图像。

			{
				test: /\.(png|svg|jpg|jpeg|gif)$/i,
				type: 'asset/resource',
			},

最后欢迎留言讨论v( •̀ ω •́ )✧。