Webpack5 file-loader、url-loader打包url引入一张图片生成两个图片，一个无法加载

经查，css-loader版本不同。
css-loader 6.0.0以上版本。对引入背景图片的url解析方式不一样，导致生成了两个图片（一个正常由file-loader解析生成，一个仅由css-loader解析引入）

解决方案一：
将css-loader版本由6降到5就行了

解决方案二：
官方推荐使用asset module 资源模块替换loader

解决方案三：
如果你还想使用url-loader 那么你只需要在url-loader中设置type: 'javascript/auto’即可；

同样的对于页面上的图片的引入我们之前的方法是使用css-loader并且要将url-loader的esModule设置为false，因为我们现在的css-loader引入图片使用的是commonjs，而url-loader默认使用es6模块化解析，如果不设置为false打包后的图片路径会出现 [object Module]。
 

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