vue-cli 3項目使用svg一路填坑

先安裝svg的loader
npm install svg-sprite-loader --save-dev

並沒有效果，因爲沒有配置

但是項目是用vue-cli3版本創建的，首先項目的目錄結構和以前相比有變化。
沒有了config、build等目錄
q：webconfig在哪裏配置？
a : 在根目錄新建vue.config.js
// vue.config.js
module.exports = {
chainWebpack: config => {

// 一個規則裏的 基礎Loader
// svg是個基礎loader
const svgRule = config.module.rule('svg')

// 清除已有的所有 loader。
// 如果你不這樣做，接下來的 loader 會附加在該規則現有的 loader 之後。
svgRule.uses.clear()

// 添加要替換的 loader
svgRule
    .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
            })
    
  }

}

參考：
https://cli.vuejs.org/zh/guide/webpack.html#%E4%BF%AE%E6%94%B9-loader-%E9%80%89%E9%A1%B9
https://github.com/mozilla-neutrino/webpack-chain
https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/base.js