美文网首页tses6gitwebpack面试
vue项目 webpack 打包图片小图片转换成base64,大

vue项目 webpack 打包图片小图片转换成base64,大

作者: 十九楼的清风 | 来源:发表于2020-11-03 09:01 被阅读0次

    问题现象:用vue框架开发的一个demo项目,在本地测试运行发现图片资源变成了base64格式,然后换了一张图片(这张图片比较大)img里的src变成了图片路径,然后打包给测试之后发现线上的也是找不到这张图片,于是开始自己寻找问题的原因。

    找了资料后发现,原来webpack打包机制的原因导致的。

      // 小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。
      // 大于8k的呢?则直接file-loader打包, 这里并没有写明file-loader.但是确实是需要安装,否则会有问题.而name也是file-loader的属性. 重复一次 必须安装file-loader
    
      { 
    
        test: /\.(woff|woff2|eot|ttf|svg|jpg|png|gif)\??.*$/, 
    
        loader: 'url-loader',
    
        query: {
    
          // 图片大小限制 单位b
    
          limit: 8192,
    
          // 生成的文件的存放目录
    
          name: 'resourse/[name].[ext]'
    
        }
    
      },

    相关文章

      网友评论

        本文标题:vue项目 webpack 打包图片小图片转换成base64,大

        本文链接:https://www.haomeiwen.com/subject/sjgmvktx.html