Webpack 是目前流行的前端打包工具之一，除了打包 JavaScript 代码外，还可以处理各种资源文件，比如图片和字体。本文将详细介绍 Webpack 在打包过程中如何处理图片和字体。
处理图片
Webpack 可以将图片资源处理成 base64 编码或者将图片打包成独立的文件，同时还可以对图片进行压缩和优化等操作。
使用 file-loader
file-loader 是一个处理文件资源的 loader，可以将资源文件输出到指定的目录，并返回资源的 URL。在 webpack.config.js 中配置 file-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -----------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- ---------
-
-
-
-
-
-
-这个配置会匹配引入的所有图片类型（png、svg、jpg、gif），并将文件输出路径设为 images 目录。
使用 url-loader
url-loader 是一种特殊的 file-loader，可以将图片转换为 base64 编码的 DataURL，以避免网络请求带来的延迟。这对小文件很有用，但对于大文件，base64 编码会影响网页加载速度和性能。
url-loader 可以设置参数 limit，如果图片大小小于 limit，会使用 DataURL，否则会使用 file-loader，将文件打包到指定目录，并返回文件 URL。
在 webpack.config.js 中配置 url-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -----------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
-
-
-
-
-
-
-图片压缩和优化
可以使用 image-webpack-loader 将图片压缩和优化。要使用 image-webpack-loader，需要安装 imagemin 和 imagemin 插件：
npm install --save-dev imagemin imagemin-mozjpeg imagemin-pngquant imagemin-gifsicle
在 webpack.config.js 中配置 image-webpack-loader，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- -----------------------
---- -
-
------- -------------
-------- -
------ -----
----- ---------------
----------- ---------
-
--
-
------- -----------------------
-------- -
-------- -
-------- ---
------------ ----
--
-------- -
-------- ------
--
--------- -
-------- ------ ------
------ -
--
--------- -
----------- ------
-
-
-
-
-
-
-
-示例代码
在 HTML 中引入图片：
<img src="./logo.png" alt="logo">
在 JavaScript 中引入图片：
import logo from './logo.png';
处理字体
Web 字体是指通过网络加载的字体，可以替换默认的系统字体。Webpack 可以打包处理字体文件，包括 TrueType 字体（.ttf）、OpenType 字体（.otf）、Web Open Font Format 字体（.woff）、Web Open Font Format 2 字体（.woff2）等。
在 webpack.config.js 中配置字体文件的处理，如下所示：
-- -------------------- ---- -------
-------------- - -
------- -
------ -
-
----- ------------------------------
---- -
-
------- --------------
-------- -
----- ---------------
----------- --------
-
-
-
-
-
-
-这个配置会匹配引入的所有字体类型（.woff、.woff2、.eot、.ttf、.otf），并将字体文件输出到 fonts 目录。
示例代码
在 CSS 中引入字体：
@font-face {
font-family: 'MyFont';
src: url('../fonts/myfont.woff2') format('woff2'),
url('../fonts/myfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}总结
本文介绍了 Webpack 如何处理图片和字体，包括使用 file-loader 和 url-loader 处理图片，使用 image-webpack-loader 对图片进行优化和压缩，以及使用 file-loader 处理字体。正确配置 Webpack 可以使网页加载更快，并提高性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64643f50968c7c53b051ffc5