Webpack干货系列 | Webpack5 怎么处理字体图标、图片资源

2022-07-18 16:02:27 阅读：235 来源： 互联网

标签：文件 Webpack5 iconfont Webpack 字体目录 css 图标

程序员优雅哥(youyacoder)简介：十年程序员，呆过央企外企私企，做过前端后端架构。分享vue、Java等前后端技术和架构。
本文摘要：主要讲解在不需要引入额外的loader的条件下运用Webpack 5 如何高效处理字体图标、图片资源的方法与步骤。

网页上需要使用到图片、字体图标等资源，有些网站还会使用到音频、视频等资源。在之前的webpack4版本，默认是不能处理图片资源的，需要额外配置loader（url-loader和file-loader）才能处理。在webpack 5中默认就可以支持对图片的处理，不需要引入额外的依赖。如果需要指定图片编码为base64、输出目录等，只需要简单的配置即可。

1 处理字体图标资源

粗俗的理解，字体图标就是给元素标签设置对应的class，就可以在页面上展示出图标来。本质上，字体图标也是一种字体。

1.1 添加字体图标文件

首先在阿里巴巴矢量图标库网站（Iconfont）上获取字体图标，具体步骤参考《在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('../../iconfont/iconfont.ttf?t=1654939069757') format('truetype');

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

import './style/css/iconfont.css'

5、在 index.html 中使用字体图标

<span class="iconfont icon-mobile"></span>
<span class="iconfont icon-Notebook"></span>
<span class="iconfont icon-rili"></span>

1.2 使用webpack打包编译

yarn build

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

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

1.3 配置 webpack

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

  module: {
    rules: [
      ...
      {
        test: /\.ttf$/,
        type: 'asset/resource',
        generator: {
          filename: 'resources/[hash:10][ext][query]'
        }
      }
    ]
  },

generator 指定输出的规则。 filename 表示输出的文件相对路径及名称，此处配置表示.ttf格式的文件，打包后放在 dist/resources目录下，名字为 hash 值的前10位。

再次打包运行，会发现 dist 目录下多了一个 resources目录，并且字体图标 ttf 文件位于该目录中。

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

其实不仅是字体图标文件，其他的媒体资源文件，如avi、mp3等资源，都可以使用该配置。故该配置可以修改 test 属性，使其处理多种格式的媒体资源。

{
  test: /\.(avi|mp3|ttf|woff2?)$/,
  type: 'asset/resource',
  generator: {
    filename: 'resources/[hash:10][ext][query]'
  }
}

2 处理图片资源

2.1 添加并使用图标文件

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

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

.img1 {
  width: 200px;
  height: 100px;
  background: url("../../img/img1.png");
  background-size: 100% 100%;
}

.img2 {
  width: 200px;
  height: 100px;
  background: url("../../img/img2.jpeg");
  background-size: cover;
}

.img3 {
  width: 100px;
  height: 100px;
  background: url("../../img/img3.svg");
  background-size: cover;
}

3、在 src/main.js中引入该样式文件：

import './style/css/img-demo.css'

4、在 template/index.html中创建三个div，并设置对应的class：

<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>

2.2 使用webpack编译打包

执行在第一节中配置的build命令：

yarn build

执行命令后，显示打包成功，说明 webpack5 默认便可以处理图片资源。在浏览器中访问 index.html，可以看到三个div背景图正常显示。

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

2.3 配置 webpack

在 webpack.config.js 中的 module.rules 中添加对图片文件的处理，指定输出文件名称，并且在图片大小小于10kb时，将其转为base64放在js中（可以减少网络请求数）：

{
	test: /\.(png|jpe?g|gif|svg?)$/,
	type: 'asset',
	parser: {
		dataUrlCondition: {
			maxSize: 10 * 1024
		}
	},
	generator: {
		filename: 'img/[hash:10][ext][query]'
	}
}

maxSize 就是指小于该大小的图片，就转为base64。这里要注意 type属性为 asset。上面处理字体图片等媒体资源时，type属性为asset/resource。asset和asset/resource的区别就是，后者只做拷贝，不能配置转base64。

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

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

今日优雅哥（youyacoder）学习结束，期待关注留言分享~~

标签：文件,Webpack5,iconfont,Webpack,字体,目录,css,图标
来源： https://www.cnblogs.com/youyacoder/p/16490760.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9