想在Webpack中添加如下配置:
(src/icons中的svg文件用svg-sprite-loader载入, 其他文件夹中的svg用url-loader载入)
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
exclude: [resolve('src/icons')],
options: {
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
},
vue-cli < v3.0.0时, 直接在webpack.base.conf.js里修改就完了,
但是在vue-cli v3.0.0里, 配置方式变了
跟着这个 文档 改了半天还是没改对
现在vue.config.js是这样写的 (运行不对) :
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
chainWebpack: config => {
// 添加loader
config.module
.rule('svg')
.test(/\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
//.include([resolve('src/icons')])
.options({ symbolId: 'icon-[name]' })
.end()
// 修改loader配置
config.module
.rule('svg')
.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)
.use('url-loader')
.loader('url-loader')
.tap(exclude => {
exclude = [resolve('src/icons')]
return exclude
})
}
}
还是这个文档.. 里面有讲规则替换方法
暂时实现统一用svg-sprite-loader载入,后面再研究下分区文件夹..