修改vue2.x项目的webpack配置

204 阅读1分钟

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