likes
comments
collection
share

webpack5资源模块asset

作者站长头像
站长
· 阅读数 18

引导

  • 上一篇讲解了webpack搭建开发环境
  • 有一个问题 到目前为止 项目只能加载JS
  • 但是我们想混合一些其他的资源怎么办呢? -- 比如images/ 字体 / 图标等

资源模块asset module type

可以通过4种类型模块 来替换掉所有的loader webpack5资源模块asset

asset / resource 导出图片资源

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

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

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

有两个方法

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

如果方法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 webpack5资源模块asset
  • 打包后发现dist下的目录并没有导出资源
  • 只能在浏览器中控制台看到资源 这就是asset/inline类型 webpack5资源模块asset

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
         }
        }
      }
    ]
  },