图标字体下载

本文主要阐述了利用Webpack 5高效处理字体图标和图片资源的方法和步骤。

1处理字体图标资源

通俗的理解，字体图标就是为元素标签设置相应的类，这样图标才能在页面上显示。本质上，字体图标也是一种字体。

1.1添加字体图标文件

首先，在阿里巴巴矢量图标库网站上获取字体图标。具体步骤请参考文章《在iconfont上获取图标资源》。通过本网站获得的字体图标文件如下:

在浏览器中打开demo_index.html，可以看到字体图标的使用:

1.将iconfont.css文件复制到src/style/css目录下；

2.在src目录下创建一个iconfont目录，将iconfont.css中使用的iconfont.ttf文件复制到新创建的src/iconfont目录下；

3.修改src/style/css/iconfont.css文件中iconfont.ttf的引用路径:

src: url格式；

4.在main.js文件中导入iconfont.css

“导入”。/style/css/iconfont.css '

5.在index.html使用字体图标。

1.2用webpack打包和编译

纱线结构

命令执行后，显示打包成功，说明webpack5默认可以处理字体图标资源。当您在浏览器中访问index.html时，可以看到字体图标正常显示。

查看打包的dist目录，您会看到字体图标文件位于包的根路径中。我们希望将字体图标资源放在dist/resources目录中。您需要配置webpack。

1.3配置webpack

在webpack.config.js的module.rules中添加字体图标文件的处理，并指定输出文件名:

模块:{规则:[...{测试:/。ttf$/，type: 'asset/resource '，generator:{ filename:' resources/[hash:10][ext][query]' }]}，

生成器指定输出规则。Filename表示输出文件的相对路径和名称。这里，文件在。ttf格式被配置、打包并放在dist/resources目录中。该名称是哈希值的前10位数字。

打包后再次运行，你会发现在dist目录下还有一个额外的resources目录，字体图标的ttf文件就位于这个目录下。

当您在浏览器中访问index.html时，字体图标会正常显示。

其实不仅仅是字体图标文件，其他媒体资源文件，比如avi、mp3等资源都可以使用这种配置。因此，这种配置可以修改测试属性来处理各种格式的媒体资源。

{测试:/。$/，type: 'asset/resource '，生成器:{ filename:' resources/[hash:10][ext][query]' } }

2处理图片资源

2.1添加和使用图标文件

1、在src目录下创建目录img，拷贝图片到该目录中。我准备了三张图片，分别是png、jpeg、svg1.在src目录下创建目录img，将图片复制到目录下。我准备了三张图片，分别是png，jpeg，svg。

2、在 src/style/css下创建文件 img-demo.css样式文件，在该样式文件中定义三个样式类，每个样式类使用一个图片作为背景：2.在src/style/css下创建文件img-demo.css样式文件，并在该样式文件中定义三个样式类，每个样式类都使用一张图片作为背景:

.img1 { width: 200px; height: 100px; background: url; background-size: 100% 100%;}.img2 { width: 200px; height: 100px; background: url; background-size: cover;}.img3 { width: 100px; height: 100px; background: url; background-size: cover;}. img 1 { width:200 px；高度:100px背景:网址；背景尺寸:100% 100%；} . img 2 { width:200 px；高度:100px背景:网址；背景-尺寸:封面；} . img 3 { width:100p x；高度:100px背景:网址；背景-尺寸:封面；}

3.在src/main.js中介绍这个样式文件:

import './style/css/img-demo.css'“导入”。/style/css/img-demo.css '

4.在template/index.html中创建三个P，并设置相应的类:

执行第一部分中配置的构建命令:

纱线结构

命令执行后，显示打包成功，意味着默认情况下webpack5可以处理图像资源。当您在浏览器中访问index.html时，您可以看到三个P背景图像正常显示。

查看打包后的 dist 目录，看到三个图片文件都位于打包根路径下，这样显得比较杂乱，我们希望图片资源放在 dist/img目录下。这就需要配置webpack了。查看packed dist目录，可以看到三个图片文件都位于包的根路径下，比较乱。我们希望图片资源放在dist/img目录中。您需要配置webpack。

2.3配置webpack

在webpack.config.js的module.rules中添加图像文件处理，指定输出文件名，当图像大小小于10kb时，转换为base64，放入js:

{ test: /.$/, type: 'asset', parser: { dataUrlCondition: { maxSize: 10 * 1024 } }, generator: { filename: 'img/[hash:10][ext][query]' } }{测试:/。$/，类型:' asset '，解析器:{ dataurl condition:{ maxSize:10 * 1024 } }，生成器:{ filename:' img/[hash:10][ext][query]' } }

MaxSize指的是比这个尺寸小的图片，所以转换成base64。注意，这里的类型属性是asset。在处理上述字体、图片等媒体资源时，type属性为asset/resource。asset和asset/resource的区别在于，后者只制作副本，不能配置为传输到base64。

重新执行打包命令，可以看到dist目录下只有一张图片，因为 img1 和 img3 都小于10kb，被转为base64了。在浏览器测试访问，显示正常。重新执行打包命令，可以看到dist目录下只有一张图片，因为img1和img3都小于10kb，而且已经转换成base64了。在浏览器中测试访问，显示正常。

总而言之，webpack 5可以默认处理图片、字体图标等资源，不需要引入额外的加载器，定制打包只需要简单的配置。