这个问题真的是太坑了
首先我是跟着一个教程学的webpack，但是作者本人用的webpack4，我安装的时候没想到4和5区别这么大，js打包没有问题，样式打包也没有问题，但是在样式里引入图片时，图片打包后显示异常，没有报图片地址404，也没有出现网上很多人出现的[object object]问题。图片获取看上去没什么问题，但是链接打开是一个空白的小方格。
这个问题大概看了两天了，本来想放弃了，直接把webpack降级到4不香吗？我在这里解决个锤子，我确实也降级了，但是降级遇到的一些插件版本的问题也很棘手，干脆就解决webpack5使用loader的问题算了。如果有遇到相同问题的朋友，可以参考我的做法试一下。
首先webpack5内置了资源模块（assets），可以自己处理资源文件（图片、字体等），在webpack5之前都是需要通过配置一些额外的loader，例如：url-loader，file-loader。webpack处理资源文件可以参考以下代码：
{
test: /\.(png|gif)$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024
}
},
generator: {
filename: 'static/[hash].[ext]'
}
}
- asset/resource：将文件打包输出并导出 URL，类似于 file-loader。
- asset/inline：导出一个资源的 data URI，编码到 bundle 中输出，类似于 url-loader。
- asset/source：导出资源的源代码，类似于 raw-loader。
- asset：提供了一种通用的资源类型，根据设置的 Rule.parser.dataUrlCondition.maxSize 自动的在 asset/resource、asset/inline 之间做选择，小于该大小指定的文件视为 inline 模块类型，否则视为 resource 模块类型。
回到我遇到的问题，在webpack5中使用loader去打包资源文件时，需要在test下增加一行type: 'javascript/auto'，否则配置的loader不生效。
如果配置了之后，还没有显示图片，检查一下是否安装html-loader，如果没有安装的话，图片是无法在html中显示的。安装后，图片应该会显示正常。
webpack5配置url-loader代码可以参考如下：
{
test: /\.(png|jpg|gif|jpeg)$/,
type: 'javascript/auto',
use: [
{
loader: 'url-loader',
options: {
limit: 10240,
esModule: false,
name: 'assets/[name].[ext]'
}
}
],
exclude: /node_modules/
}
