在webpack5中使用url-loader加载图片显示空白

这个问题真的是太坑了

首先我是跟着一个教程学的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/
}