前言
在前端开发中，我们经常需要使用 SVG 图片。而 SVG 图片的优势在于可以无限放大不失真，同时也可以通过 CSS 修改其颜色和大小。然而，直接在 HTML 中引入 SVG 图片会增加 HTTP 请求，影响页面加载速度。这时候就有一个解决方案：使用 webpack 的 svg-loader 让我们把 SVG 图片打包成一个单独的文件，在需要时再进行引用。
安装
使用 npm 安装 svg-loader：
npm i -D svg-loader
配置
在 webpack 配置文件中添加以下配置：
-- -------------------- ---- -------
------- -
------ -
-
----- ---------
---- -
-
------- -------------
-------- -
----- ----------------------
----------- -------
--
--
--
--
--
--以上代码中，我们定义了一个匹配 SVG 文件的 loader，然后使用 svg-loader 进行加载，并且指定了以下两个配置项：
name: 定义输出文件名的格式，其中包含[name]表示原来的文件名，[hash]表示随机散列值，[ext]表示原来的扩展名。outputPath: 定义输出文件路径。
引用
在需要引用 SVG 文件的地方使用 import 或 require 进行引用即可，如下所示：
-- -------------------- ---- -------
------ ---- ---- -------------
-------- ----- -
------ -
---- ----------------
---- ---------- -------------------- ---------- --
------
--
-
------ ------- ----总结
使用 svg-loader，我们可以轻松地把 SVG 图片打包成单个文件，避免增加 HTTP 请求和影响页面加载速度。同时，我们可以对 SVG 图片进行灵活的样式定制，提升页面的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/189218