轉 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/