chainWebpack(config) { config.module .rule('svg') .exclude.add(path.resolve(__dirname,'src/assets/icons')) .end();
config.module .rule('icons') .test(/\.svg$/) .include.add(path.resolve(__dirname,'src/assets/icons')) .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); config.module .rule('svg-file') .test(/\.svg$/) .exclude.add(path.resolve(__dirname,'src/assets/icons')) .end() .use('url-loader') .loader('url-loader') .options({ limit: 10000, name: 'static/[name].[hash:8].[ext]', }); }, <svg> <use xlinkHref="#icon-about" /> </svg>

利用webpack提供的的require.contextAPI 来创建自己的context module动态引入icon

require.context(directory, useSubdirectories = false, regExp = /^\.\//);
第一个是文件夹，
第二个是是否使用子文件，
第三个是文件匹配的正则。
  • keys()方法返回的该模块可以处理的所有可能请求的模块的数组，简单一点就是满足该参数的模块；
  • resolve()返回的是请求的module的id;
  • id是该context module的id;
const request = require.context('@/assets/icons', true, /\.svg$/);
request.keys().forEach(request);

 

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

参考

https://segmentfault.com/a/1190000015367490

https://juejin.im/post/5bc93881f265da0aea69ae2e

扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄