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

·  阅读 57
Webpack干货系列 | Webpack5 中怎么处理字体图标、图片资源

程序员优雅哥(youyacoder)简介:十年程序员,呆过央企外企私企,做过前端后端架构。分享vue、Java等前后端技术和架构。

本文摘要:主要讲解运用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/resourceassetasset/resource的区别就是,后者只做拷贝,不能配置转base64。

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

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

今日优雅哥(youyacoder)学习结束,期待关注留言分享~~

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改