如果我们直接引入的图片是网上链接对应的图片，那么是可以不用图片解析器的。
如果是在图片放在本项目的路径内引入就需要用的图片解析器。常用的图片解析器有file-loader和url-loader

常见的使用图片的几种方法

• 在js中创建图片来引入
• 在css引入 backgroun(‘url’)
• 在html中引入标签

npm i url-loader -D

file-loader和url-loader的区别

如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。

url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
url-loader对file-loader进行了封装，

转换为base64位只是为了少发送请求，其实转换为base64位大小会增大1/3左右

html引入图片配置

{
  test: /\.html?$/,
    use: {
      loader: "html-withimg-loader",
    }
},

css和js中引入图片loader配置

{
  test: /\.(png|jpe?g|gif)$/,
    use: {
      loader: "url-loader",
        options: {
          limit: 1024, // 图片小于1kb会被转换为base64位，减少请求次数
            name: '[name].[hash].[ext]', // 更改文件名和打包到对应的目录中
            outputPath: './img/', // 把图片放到img文件夹
            publicPath: 'http://img.com/img/' // 线上cdn地址 可以单独配置，配置过后打包类似http://img.com/img/4.3724e25a9b9b0846939d87d71a2df125.jpg
        }
    }
}

使用

// css使用背景图片，不用require,因为css-loader跟我们做了这件事情
background: url("../img/2.jpg");
// js中使用 
// 注意：图片需要require或者import引入，才能使用
import img1 from './img/1.jpg'; // 把图片引入，返回的结果是一个新的图片地址
let image = new Image();
console.log(img1) // b0478990a400c8846399d1629bf15b3d.jpg
image.src = img1; // 就是一个普通的字符串
document.body.appendChild(image);

参考链接

https://www.npmjs.com/package/url-loader