vue inspect查看vue的webpack所有配置项
vue inspect --rule
vue inspect --rule svg
module.exports = {
configureWebpack:{name:'项目title'} // <%= webpackconfig.name %>,
chainWebpack(config){
//下面一行代码表示:获取vue默认的webpack的svg的loader代码然后添加进去exlude规则可以用 vue inspect --rule svg查看添加这行代码前后的配置变化
config.module.rule("svg").exclude.add(resolve('./src/icons'))
config.module.rule('icons')
.test('/\.svg$/')
.include
.add(resolve('./src/icons')).end() <--需要end一下返回上一级 才能继续接操作
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options([symbolId:'icon-[name]'])
// npm i svg-sprite-loader -D
// <svg> <use xlink:href="#icon-denglong"></use> </svg>
// 但是在用的时候,需要在用的地方导入文件,下面是一个通用的方法,一次性导入所有的svg文件
// icons文件夹内 新建js 且暴露在main.js中执行下面js代码,后续webpack会执行下面代码
// const req = require.context('./svg',false,/\.svg$/)
// req.keys().map(req)
}
}