最近开始看 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/