• 首页 首页 icon
  • 工具库 工具库 icon
    • IP查询 IP查询 icon
  • 内容库 内容库 icon
    • 快讯库 快讯库 icon
    • 精品库 精品库 icon
    • 问答库 问答库 icon
  • 更多 更多 icon
    • 服务条款 服务条款 icon

webpack5资源模块asset

武飞扬头像
haosicx
帮助85

资源模块asset module type

可以通过4种类型模块 来替换掉所有的loader 在这里插入图片描述

asset / resource 导出图片资源

用于发送一个单独的文件并导出URl

  • 比如我现在想在项目中加载png类型的本地图片需要怎么做呢? -- 首先要配置webpack.config.js 增加一个属性modules用来写入规则
module:{ //设置模块
    rules:[ //设置loader
      {
        test:/\.png$/, //已png作为扩展名这样类型的文件
        type:'asset/resource', //资源模块类型
      }
    ]
  },
  • 接着我们在文件中写入一个png文件 在这里插入图片描述
  • 然后我们终端命令输入webpack进行打包 会发现dist下面生成了一个png文件 -- 这个是系统自动帮助我们生成出来的 在这里插入图片描述
  • 并且成功在浏览器上显示出来了 在这里插入图片描述
  • webpack会自动帮我们把资源打包在dist文件下并且自动取好了文件名 -- 那我们能不能自己定义文件的目录和文件名呢?

修改asset/resource模块下打包后的资源路径和文件名

有两个方法

  • 方法1: -- 在output下面加一个assetMoudleFilename 属性 -- 比如我想让打包的资源输出在dist / images下可以这么去写
 output:{
 	//设置图片输出路径以及文件名称
    assetModuleFilename:'images/[contenthash][ext]' 
    // [contenthash] webpack自带方法  根据文件的内容去生产一个hash字符串
 	// [ext] webpack自带方法 根据文件的内容生成扩展名
  },
  • 打包出来的结果就是自己定义的了 在这里插入图片描述
  • 方法2: -- 可以在module的rules中添加属性 generator -- 这次我们打包在dist / picture
 module:{ //设置模块
    rules:[ //设置loader
      {
        test:/\.png$/, //已png作为扩展名这样类型的文件
        type:'asset/resource', //资源文件
        generator:{ //设置生成器
          filename:'picture/[contenthash][ext]', //设置生成的文件名
        } 
      }
    ]
  },
  • 打包的结果就在picture下了 在这里插入图片描述

如果方法1和方法2同时都写了 那么写在rules下的generator方法的优先级是比写在output下的assetModuleFilename的优先级高的

asset / inline 资源转化成base64

用于导出一个资源的Data URL ( base64 )

  • 比如 这次我们想导出一个svg类型的资源
  • webpack.config.js中配置
module:{ //设置模块
    rules:[ //设置loader
      {
        test:/\.svg$/, //已svg作为扩展名这样类型的文件
        type:'asset/inline', //内联文件
      }
    ]
  },
  • 然后引入一个svg 在这里插入图片描述
  • 打包后发现dist下的目录并没有导出资源
  • 只能在浏览器中控制台看到资源 这就是asset/inline类型
    在这里插入图片描述

asset / source 读取资源的内容

  • 用于导出资源的源代码
  • 比如导出一个txt格式的文本文件
 module:{ //设置模块
    rules:[ //设置loader
      {
        test:/\.txt$/, //已txt作为扩展名这样类型的文件
        type:'asset/source', //源文件
      }
    ]
  },
  • 然后我们写入一个txt文件并且打包
  • 会发现dist下也不会打包出任何的文件
  • 页面上才可以看到 说明asset/source可以读取资源的源文件

asset通用数据类型自动转换

  • 他会在导出一个Data URL( base64 )和发送一个单独文件之间自动进行选择
  • 也就是说会在resource类型和inline中自动转换
  • 那么这个是根据的什么东西去自动转换的呢?
  • 默认情况下 -- 当资源大于8k的情况下 走的就是asset/resource ( 输出图片资源 ) -- 当资源小于8k的情况下 走的就是asset/inline ( 不输出图片资源 变成base64链接 )

那怎么去调整这个阈值呢 可以设置如下参数

module:{ //设置模块
    rules:[ //设置loader
      {
        test:/\.jpg$/, //已作为jpg扩展名这样类型的文件
        type:'asset', //源文件
        parser:{  //设置解析器
         dataUrlCondition:{ //设置解析条件
            maxSize:10*1024*1024, //最大10mb
         }
        }
      }
    ]
  },

这篇文章转载于:学新通

  • 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
  • 本站站名: 学新通
  • 本文地址: https://www.swvq.com/boutique/detail/tanfbefj
  • 联系方式: luke.wu●vfv.cc
系列文章
更多 icon
同类精品
更多 icon
我要评论
我的头像
精彩评论
继续加载