vue-cli3.0+webpack4中关于svg-sprite-loader踩坑，让svg组件徜徉个人web项目

第一次写文章，今天踩坑事后但愿可以记录这样'生动有趣'的踩坑之旅，仍是那样，在技术的海洋中，我和大佬就像鱼和水，我没了大佬就凉了，大佬没了我还清净，感谢一路栽培。公司以前的项目都是用vue-cli2.x的脚手架集成的webpack3，可是最近的项目用到@vue/cli3,也就是vue-cli3，最新的脚手架契合webpack4，目前文档也更新到了这个版本，一开始看目录结构，纳尼！！webpack常规的配置文件build和config文件怎么没了，这尼玛是否是没有用到自动化构建！！诸如此类的疑问我相信当你第一眼看到这样简洁清爽的目录结构时也会产生，而后我就去看文档，这里cli.vuejs.org/zh/guide/,原来脚手架自动帮咱们把webpack的配置集成到了node_modules中

，这样的目录结构仍是有些熟悉的。好，那么疑问又产生了，我如何根据项目须要配置baseUrl，outputDir，assetsDir ，loader等等呢，官方是这样写的 调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象 , 总结两个， configureWebpack， chainWebpack，这也是咱们后面须要用到的两个属性，是更改webpack配置的关键， configureWebpack属性值能够是一个对象或者是一个函数，当为对象时该对象将会被 webpack-merge 合并入最终的 webpack 配置，这应该是集成第三方插件的用法，另外当属性值是一个函数的时候，函数的第一个参数是已经解析好的配置，咱们能够看一下console.log

结果 是

是否是看到了许多熟悉的属性，是的，这个config就是webpack的基础配置了，

这里也返回了vue-cli3给我内置配好的不一样lodaer，图中对应每个[object],这也是后来修改和暴力重设loader发现的，仿佛发现新大陆通常的我开始继续项目了，毕竟大佬给的时间有点紧迫，嘤嘤嘤....，由于种种缘由ui小姐姐无法将有过渡渐变效果的svg图片放在iconfont上，因此只能本身在项目本地使用svg，参考vue-element-admin中提供一个svg组件的方式，我也这样作

这是svg图片的组件目录结构，接下来是js文件和vue-component

本来的es6箭头函数看上去比较社会(涩会)，因此用es5的方式展现，这里很是重要的webpack内置api,require.context函数，它接受三个参数，第一个是文件夹，第二个是是否使用子文件，第三个是文件匹配的正则。对于咱们的项目来讲，咱们须要动态引入的就是

const req = require.context('./svg', false, /\.svg$/)
复制代码

require.context会返回一个函数,对应上面的console咱们看一下控制台

那么311这里对应的这个函数到底表明什么呢，咱们知道js中函数也是一个对象，那么这个函数有神马不一样，点开看一下：

，哇，看到这个我心态都蹦了，还很激动，这个方法会把咱们刚刚联系的上下文中的svg所有写入一个map对象，而这个方法也本身定义了keys方法，用来遍历map，遍历后的key能够做为 webpackContext（key）的参数，从而导出每个svg，咱们看一下导出的requireAll(req)（对应图中，也就是前面说到的webpackContext（key））

果真如所说的，导出了每个map中对应的svg图，可是可能会有所疑问为何不是键值形式对应的值，以下：

这里就要说到遇到的第一个坑了，常规按照脚手架的设置，对svg图片的处理会通过file-loader进行文件转化，咱们知道这种工程化项目在跑起来时内部会生产一个隐式的dist包，全部的静态资源都会被打包进dist/assets/下，这里也不例外，因此我console.log出来后全是诸如此类的"assets/img/daily-mission83544646.svg "如此的通过其余loader转化的svg图片，可是这样写的话咱们的svg组件是无法经过use标签拿到对应svg图片的，这里参考一下张鑫旭大神的关于svg的讲解 将来必热 ，因此咱们只能更改脚手架的默认配置，经过svg-sprite-loader生成对应的svg精灵图供咱们组件使用，思路回到前文提到的两种配置更改webpack的思路，由于没有用过，因此此坑必填。使用configWebpack:config=>{}这种方式去合并或者添加svg-sprite-loader的方法虽然在rules中增长了该lodaer，可是不知道是由于已经有了其余loader解析svg或者脚手架的基础poader配置权限最高问题，svg图片始终得不到正确的处理，此方法（失败）代码：

configWebpack:config =>{
   config.module.rules.push(
           {
               test: /\.svg$/,
               loader: 'svg-sprite-loader',
               include: [resolve('src/icons')],
               options: {
                   symbolId: 'icon-[name]'
               }
           }
       )
}
复制代码

结果无功而返，参考了文档后发现了重设loader的配置方法，那就是经过chainWebpack，经过链式操做来修改配置，官方给出的结论 是能够容许咱们更细粒度的控制其内部配置，提供了一个 webpack 原始配置的上层抽象，使其能够定义具名的 loader 规则和具名插件，并有机会在后期进入这些规则并对它们的选项进行修改。对于这句话我目前还不是很理解，真是只在此山中，云深不知处！若是合并不行，那就替换！

chainWebpack: config => {
        const svgRule = config.module.rule('svg');
         svgRule.uses.clear();
         svgRule
            .test( /\.svg$/)
            .use('svg-sprite-loader')
           .loader('svg-sprite-loader')
           .options({
              symbolId: 'icon-[name]'
          });
      }
复制代码

如此~svg成功经过此loader解析，咱们也获得了须要的svg图片模块，可是既然知道合并不行，替换能够，若是不但愿用链式操做的话这里也列出一种暴力的方法去修改，一样经过configWebpack

configureWebpack: config => {
       console.log(config)
       let rules=config.module.rules;
       for(let i in rules){
           console.log(rules[i]);
           if(rules[i].use && rules[i].use[0].loader=='file-loader'){
               rules.splice(i,1)
           }
       }

       config.module.rules.push(
           {
               test: /\.svg$/,
               loader: 'svg-sprite-loader',
               include: [resolve('src/icons')],
               options: {
                   symbolId: 'icon-[name]'
               }
           }
       )
   }
复制代码

如今这样的话，删除了file-loader，其实和替换同样，可是看上去暴力一些，效果确是相同的。至此，大佬和个人加班时间也到了末尾，感受很累，可是感受收获颇丰，走出公司，风呼啸着略过个人双肩背包，我耸了下眼镜，走向昏黄的公交车站。感谢！