webpack（6）webpack处理图片

图片处理url-loader(webpack5之前的处理方式)

在项目开发中，我们时长会需要使用到图片，比如在img文件夹中有图片test1.png，然后在normal.css中会引用到图片

body{
    background: url("../img/test1.png");
}

但是此时，我们直接使用webpack打包是会报错的，我们需要安装url-loader，它是用于将文件转换为 base64 URI 的 loader。

安装命令如下：

npm install url-loader --save-dev

url-loader 功能类似于 file-loader, 但是在文件大小(单位为字节)低于指定的限制时，可以返回一个 DataURL。

接着我们在webpack.config.js中配置url-loader的设置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|jpeg)$/i,
        use: [
          {