转 webpack 插件 svg-sprite-loader

最近开始看 Vue 了，首先用官方的模版把项目快速搭建起来：

Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

现在的项目 webpack 几乎是标配了，各种插件好用到爆。现在我们要接触的是一个叫 svg-sprite-loader 的插件，用来根据导入的 svg 文件自动生成 symbol 标签并插入 html，接下来就可以在模版中方便地使用 svg-sprite 技术了。

使用 svg-sprite 的好处

如果不知道 svg-sprite 是什么，可以参考大神张鑫旭的文章：未来必热：SVG Sprite技术介绍

• 页面代码清爽
• 可使用 ID 随处重复调用
• 每个 SVG 图标都可以更改大小颜色

安装插件

1	npm install svg-sprite-loader --save-dev

webpack 配置

装好插件之后，配置 webpack，加入处理 svg 的 loader：

1 2 3 4 5 6 7

{ test: /\.svg$/, loader: 'svg-sprite?' + JSON.stringify({ name: '[name]', prefixize: true, }), }

这时候发现还是不行啊，body 中并没有看到 symbol 标签。

细看发现，还有一个loader 中也处理了 svg 文件：

那么就把那个 svg 去掉吧，不然下面的 svg-sprite-loader 无法起效… OK，又报错了：

由于我用了 element.js 作为 UI 框架，它的包里有个 svg 文件需要刚才的 loader 处理，我们把所有的 svg 文件都交由 svg-sprite-loader 处理了，所以这里报了错。

也就是说只有我们自己引入的 svg 文件需要经过 svg-sprite-loader，那么就将这些 svg 统一放到一个目录下，我这里放到了 src/assets/svg/ ，再修改 loader 配置。

上面 loader 匹配正则中的 svg 不用去掉了，给它加上 exclude ，不去处理 src/assets/svg/ 路径下的 svg 文件：

1 2 3 4 5 6 7 8 9 10 11

{ test: /\.(png|jpe?g|gif)(\?.*)?$/, exclude: [ path.resolve(__dirname, '../src/assets'), ], loader: 'url', query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]'), } }

下面 svg-sprite-loader 的配置中加上 include，只处理 src/assets/svg/ 路径下的 svg 文件：

1 2 3 4 5 6 7 8 9 10

{ test: /\.svg$/, include: [ path.resolve(__dirname, '../src/assets'), ], loader: 'svg-sprite?' + JSON.stringify({ name: '[name]', prefixize: true, }), }

重新启动项目，终于在 html 中看到了 symbol 标签！

如何使用

配置好了，就可以用了。使用方法很简单，相较于原来插入 svg 图标的方法（img src 或将 svg 整个写入 html），用 svg-sprite 更加简单且清爽：

1	import './assets/svg/target.svg';

1	<svg><use xlink:href="#target" /></svg>

嗯，就这样短短一行。xlink:href 中传入 svg ID 就好了，由于在上面的配置文件中我们直接使用文件名作为 symbol 的 ID，所以这里传入的 ID 即为你想显示的图标的 svg 文件名，记得加上 #。

自动导入

你会发现，这里要想插入某个图标，都得 import，每用一个都要重复一遍这个流程，太麻烦，那么我们就让 src/assets/svg/ 下的 svg 文件都自动导入吧。

webpack 可以帮我们做到：

1 2 3 4 5 6

// requires and returns all modules that match const requireAll = requireContext =>requireContext.keys().map(requireContext);   // import all svg const req = require.context('./assets/svg', true, /\.svg$/); requireAll(req);

关于 require.context 的详细用法，可以参考 webpack 文档：dynamic requires

这样一来，每当我们修改或增加新的 svg，只要将文件往这个目录下一扔，插件就会自动帮我们生成相应的 symbol 标签啦，接下来就只管用吧～♪(´ε｀ )

文章转自：https://cisy.me/webpack-svg-sprite/