vue-cli配置Webpack

Question

想在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{//添加loaderconfig.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')]returnexclude})}}

Answer 1

还是这个文档..里面有讲规则替换方法
暂时实现统一用svg-sprite-loader载入,后面再研究下分区文件夹..
module.exports={
chainWebpack:config=>{
constsvgRule=config.module.rule('svg')
//clearallexistingloaders.
//ifyoudon'tdothis,theloaderbelowwillbeappendedto
//existingloadersoftherule.
svgRule.uses.clear()
//addreplacementloader(s)
svgRule
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId:'icon-[name]'
})
}
}
                            

Answer 2

这样是可以的。而且写include和exclude要在use和loader之前写
module.exports={
chainWebpack:config=>{
config.module
.rules
.delete('svg')
config.module
.rule('svg')
.test(/\.(svg)(\?.*)?$/)
.include
.add(resolve('src/icons'))
.end()
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId:'icon-[name]'
})
}
}