首頁猿問 vue-cli配置Webpack

vue-cli配置Webpack

JavaScript

慕工程0101907 2019-05-13 08:53:34

想在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})}}

查看完整描述

2 回答

縹緲止盈

TA貢獻(xiàn)2041條經(jīng)驗獲得超4個贊

還是這個文檔..里面有講規(guī)則替換方法暫時實現(xiàn)統(tǒng)一用svg-sprite-loader載入,后面再研究下分區(qū)文件夾..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]'})}}

反對回復(fù) 2019-05-13

呼如林

TA貢獻(xiàn)1798條經(jīng)驗獲得超3個贊

這樣是可以的。而且寫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]'})}}