zoukankan      html  css  js  c++  java
  • url-loader与file-loader

    一开始用url-loader的时候,想着为什么npm run build的时候,不能将图片打包到build images的目录下,原来,没有自己看这样的说明:

    loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用,
    limit参数,代表如果小于大约8k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录

    这样在小于8K的图片将直接以base64的形式内联在代码中,可以减少一次http请求。

    忽略了这样的说明。
    理解了这些就知道,url-loader是通过limit这样的一个值的大小,来判断,小于其值的转base64,大于其值的打包到相应的生产目录下;
    而file-loader是直接将图片打包到生产目录下。
                {
                    test: /.(png|jpg)$/,
                    loader: 'url-loader?limit=8192&name=assets/images/[hash:8].[name].[ext]'
                    //limit参数,代表如果小于大约4k则会自动帮你压缩成base64编码的图片,否则拷贝文件到生产目录
                    //name后面是打包后的路径;
                    //loader 后面 limit 字段代表图片打包限制,这个限制并不是说超过了就不能打包,而是指当图片大小小于限制时会自动转成 base64 码引用
                    //上例中大于8192字节的图片正常打包,小于8192字节的图片以 base64 的方式引用。
                }

  • 相关阅读:
    wayland学习笔记(八) wayland为什么要用libffi
    线程安全函数和可重入函数 辨析
    patch的基本使用
    c++ condition_variable的wait 语法糖
    系统启动知识 说道说道(一) 冰山之下
    DDR 带宽计算公式
    wayland学习笔记(七)config的结构分析
    功耗管理篇
    operator=() 重载的问题
    ABC216
  • 原文地址:https://www.cnblogs.com/wang715100018066/p/7268277.html
Copyright © 2011-2022 走看看