第一次写文章,今天踩坑过后希望能够记录这样'生动有趣'的踩坑之旅,还是那样,在技术的海洋中,我和大佬就像鱼和水,我没了大佬就凉了,大佬没了我还清净,感谢一路栽培。公司之前的项目都是用vue-cli2.x的脚手架集成的webpack3,但是最近的项目用到@vue/cli3,也就是vue-cli3,最新的脚手架契合webpack4,目前文档也更新到了这个版本,一开始看目录结构,纳尼!!webpack常规的配置文件build和config文件怎么没了,这尼玛是不是没有用到自动化构建!!诸如此类的疑问我相信当你第一眼看到这样简洁清爽的目录结构时也会产生,然后我就去看文档,这里cli.vuejs.org/zh/guide/,原来脚手架自动帮我们把webpack的配置集成到了node_modules中
const req = require.context('./svg', false, /\.svg$/)
复制代码
require.context会返回一个函数,对应上面的console我们看一下控制台
configWebpack:config =>{
config.module.rules.push(
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
)
}
复制代码
结果无功而返,参考了文档后发现了重设loader的配置方法,那就是通过chainWebpack,通过链式操作来修改配置,官方给出的结论 是可以允许我们更细粒度的控制其内部配置,提供了一个 webpack 原始配置的上层抽象,使其可以定义具名的 loader 规则和具名插件,并有机会在后期进入这些规则并对它们的选项进行修改。对于这句话我目前还不是很理解,真是只在此山中,云深不知处!如果合并不行,那就替换!
chainWebpack: config => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule
.test( /\.svg$/)
.use('svg-sprite-loader')
.loader('svg-sprite-loader')
.options({
symbolId: 'icon-[name]'
});
}
复制代码
如此~svg成功通过此loader解析,我们也得到了需要的svg图片模块,但是既然知道合并不行,替换可以,如果不希望用链式操作的话这里也列出一种暴力的方法去修改,同样通过configWebpack
configureWebpack: config => {
console.log(config)
let rules=config.module.rules;
for(let i in rules){
console.log(rules[i]);
if(rules[i].use && rules[i].use[0].loader=='file-loader'){
rules.splice(i,1)
}
}
config.module.rules.push(
{
test: /\.svg$/,
loader: 'svg-sprite-loader',
include: [resolve('src/icons')],
options: {
symbolId: 'icon-[name]'
}
}
)
}
复制代码
现在这样的话,删除了file-loader,其实和替换一样,但是看上去暴力一些,效果确是相同的。至此,大佬和我的加班时间也到了末尾,感觉很累,但是感觉收获颇丰,走出公司,风呼啸着略过我的双肩背包,我耸了下眼镜,走向昏黄的公交车站。感谢!