Webpack打包其他资源

知识不过脑子
198 阅读4分钟

加载图片案例准备

为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

  • img元素，设置src属性； 

  • 其他元素（比如div），设置background-image的css属性；

image.png

file-loader

  • 要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader

  • pfile-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；

  • 当然我们待会儿可以学习如何修改它的名字和所在文件夹； 安装file-loader：

npm install file-loader -D

配置处理图片的Rule：

image.png

文件的命名规则：

有时候我们处理后的文件名称按照一定的规则进行显示：

  • 比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；

这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：

webpack.js.org/loaders/fil…

我们可以在文档中查阅自己需要的placeholder； 

我们这里介绍几个最常用的placeholder： 

  • [ext]： 处理文件的扩展名；

  • [name]：处理文件的名称；

  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

  • [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；

  • [hash:]：截图hash的长度，默认32个字符太长了；

  • [path]：文件相对于webpack配置文件的路径；

设置文件的名称

那么我们可以按照如下的格式编写：

  • 这个也是vue的写法；

image.png

设置文件存放路径

通过 img/ 已经设置了文件夹，这个也是vue、react脚手架中常见的设置方式： 其实按照这种设置方式就可以了；

  • 当然我们也可以通过outputPath来设置输出的文件夹；

image.png

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

npm install url-loader -D

image.png

但是在dist文件夹中，我们会看不到图片文件：

  • 这是因为我的两张图片的大小分别是38kb和295kb； 

  • 默认情况下url-loader会将所有的图片文件转成base64编码

url-loader的limit

但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

  • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程； 

  • 而大的图片也进行转换，反而会影响页面的请求速度； 如何可以限制哪些大小的图片转换和不转换呢？

  • url-loader有一个options属性limit，可以用于设置转换的限制；

  • 下面的代码38kb的图片会进行base64编码，而295kb的不会；

image.png

认识asset module type

我们当前使用的webpack版本是webpack5： 

  • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader； 

  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader： 

  • passet/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；

  • passet/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；

  • passet/source 导出资源的源代码。之前通过使用 raw-loader 实现；

  • passet 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；

asset module type的使用

  • 比如加载图片，我们可以使用下面的方式：

image.png

但是，如何可以自定义文件的输出路径和文件名呢？

  • 方式一：修改output，添加assetModuleFilename属性；

  • 方式二：在Rule中，添加一个generator属性，并且设置filename；

image.png

url-loader的limit效果

我们需要两个步骤来实现：

  • 步骤一：将type修改为asset； 

  • 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

image.png

字体的打包

这个时候打包会报错，因为无法正确的处理eot、ttf、woff等文件：

  • 我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理；

image.png

avatar
文章
阅读
粉丝