webpack5资源模块asset

文章目录 引导资源模块asset module type`asset / resource 导出图片资源`修改asset/resource模块下打包后的资源路径和文件名 `asset / inline 资源转化成base64``asset / source 读取资源的内容``asset通用数据类型自动转换`

引导 上一篇讲解了webpack搭建开发环境有一个问题 到目前为止 项目只能加载JS但是我们想混合一些其他的资源怎么办呢?
– 比如images/ 字体 / 图标等 资源模块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
         }
        }
      }
    ]
  },