vue3+ts学习（七）：webpack-图片文件相关的loader使用

在webpack5之前，需要下载file-loader，url-loader来处理图片文件。之后则是使用内置的一个asset的模块直接处理，无需下载。使用方法类似，这里直接就讲asset的使用。跟css-loader一样，需要先进行配置：

{
        test: /\.(jpe?g|png|svg|gif)$/,  
        type: "asset",
        generator: {
          //webpack自带的命名规则，下图解释，6位hash防止文件名重复
          filename: "img/[name]_[hash:6][ext]"
        },
        parser: {
          dataUrlCondition: {
            //设置低于30KB的文件用base64编码url，不会生成文件，直接存在js内
            //优点：小图不需向服务器多次请求，减少服务器压力
            maxSize: 30 * 1024  
          }
        }
}