vue-cli3中新添加svg-sprite-loader和file-loader

1. 添加svg-sprite-loader和file-loader
   本来只添加svg-sprite-loader就行了，但是svg也是图片的一种，所以file-loader也会对其进行处理，所以就会冲突，解决的办法就是，在项目中新建一个文件icons，使用file-loader编译svg的时候不编译icons里面的图标
   参考文章vue-cli3中webpack 相关配置

// vue.config.js
const path = require('path')
module.exports = {
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    svgRule
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
    const fileRule = config.module.rule('file')
    fileRule.uses.clear()
    fileRule
      .test(/\.svg$/)
      .exclude.add(path.resolve(__dirname, './src/icons'))
      .end()
      .use('file-loader')
      .loader('file-loader')
  }
}

1. include和exclude
   上面配置了include和exclude，请参考文章vue-cli3中webpack 相关配置
   

   

2. 检查配置：
   配置完了之后我怎么知道是不是正确配置了呢，下面的命令很有用

• vue inspect 执行后，控制台会显示你的webpack所有的配置
• vue inspect --rules 显示所有的rule配置规则
• vue inspect --rule svg (我们在上面配置了svg)