背景
在前端开发中，使用 SVG 可以为网站添加一些绚丽的效果，例如动画或图标等。但是，使用 SVG 文件也可能会带来一些不便，例如文件大小较大、引用方式繁琐等。
Webpack 是一个常用的前端工具，在打包过程中可以使用它来优化 SVG 文件的引用方式和大小。通过本文，我们将学习如何正确使用 Webpack 打包 SVG 文件。
准备工作
在开始之前，需要准备好以下工具和环境：
- Node.js 环境
- Webpack ^4.0.0
- svg-sprite-loader ^4.0.0
步骤
安装依赖
在开始之前，我们需要安装 svg-sprite-loader 和 svg4everybody 这两个包。可以使用如下命令进行安装：
npm install svg-sprite-loader svg4everybody --save-dev
配置 Webpack
接下来，我们将使用 Webpack 的 svg-sprite-loader 插件来优化 SVG 文件。
首先，需要在 webpack.config.js 中添加以下配置项：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------- -
------ -
-
----- ---------
------- -------------------
-
-
-
--在这里，我们定义了一个 SVG 文件处理规则，每当 Webpack 遇到一个 .svg 文件，它将自动使用 svg-sprite-loader 进行优化。
引用 SVG 文件
现在我们已经完成了 Webpack 的配置，接下来让我们来引用 SVG 文件。
在 HTML 文件中，可以使用 svg4everybody 来自动处理需要优化的 SVG 文件。
-- -------------------- ---- -------
---- ---------- ---
--------- -----
----- ----------
------
----- ----------------
-------------- --- -----------
------- ---------------------------------------------------------------------------------
-------
------
---- -------- --- -- ---
-----
---- -------------------------
------
-------
-------在上面的示例中，我们引入了一个编译后的 SVG 文件，并使用 xlink:href 属性来引用它。
使用 SVG 文件
现在我们已经成功地引入了 SVG 文件，接下来看一下如何使用它。
首先，需要导入 SVG 文件，以便在 JavaScript 代码中使用。
// index.js import myIcon from './icon.svg';
在这里，我们使用了 ES6 的 import 语法导入我们的 SVG 文件。注意，如果使用的是 CommonJS 语法，可以使用 require() 导入。
接下来，我们可以使用导入的 SVG 文件来实现我们需要的效果，例如：
// index.js
const div = document.createElement('div');
div.innerHTML = myIcon;
document.body.appendChild(div);在上面的示例中，我们创建了一个 div，并将导入的 SVG 文件插入到其中。
结论
在本文中，我们学习了如何使用 Webpack 打包 SVG 文件，以及如何在 JavaScript 代码中使用它们。通过使用 Webpack 和 svg-sprite-loader，我们可以轻松地减小文件大小和优化引用方式，让 SVG 的使用更加高效和方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67481f0793696b0268e6630d