webpack5打包图片不显示

webpack版本

webpack -v //查看

webpack 5.55.0
webpack-cli 4.8.0
webpack-dev-server 4.3.0

成功打包的配置（webpack5）

{
  test:/\.(jpg|png|gif)$/,
  type: 'asset/resource',
  generator:{ 
    filename:'img/[hash:10][ext]',
  },
},
{
  test:/\.html$/,
  loader:'html-loader',
},

出现的问题

打包成功后出现了2张图片，1和2是同一张图片，但是打包了2次，2图片是能正常显示的，1图片不能正常显示。但是页面上引入了1，所以不能显示出来。

解决

在webpack的配置中，我重复配置了文件打包的选项，没有把图片类型排除出去，注释掉下面这段代码就能正常显示图片

{
  exclude:/\.(css|html|js|less)/,
  use:[
    {
      loader:'file-loader',
      options:{
        name:'[hash:10].[ext]',
      }
    }
  ]
}

注释掉还是不能显示图片（webpack4）

使用webpack4的配置写法，但是图片打包还是存在2份，不能正常显示图片。是由于webpack5中的配置已经更新，如果任然想用webpack4的写法，可以添加type:'javascript/auto'，图片也能正常显示。

{
  test:/\.(jpg|png|gif)$/,
  use:[
    {
      loader:'url-loader',
      options:{    
        limit:8 * 1024,
        name:'[hash:10].[ext]',   
        esModule:false,             
      },
    }
  ],
  type:'javascript/auto',
},