场景：

一部分svg文件需要用url-loader处理，一部分svg文件需要使用@svgr/webpack + babel-loader处理成react 组件。

解决方式

module: [
	{
    	test: '\.svg$',
        oneOf: [
        	{
            	resourceQuery: /rc/,
                use: [
                    {
                      loader: 'babel-loader',
                    },
                    {
                      loader: '@svgr/webpack',
                      options: {
                        babel: false,
                        icon: true,
                      },
                    },
  				],
            },
        	{
            	use: ['url-loader'],
            }
        ],
       
    }
]

使用oneOf(当规则匹配时，只使用第一个匹配规则) 配置。resourceQuery 的值是一个正则，匹配资源路径后的query参数。

本例中 在资源后面添加自定义标识 rc 用来做特殊区分，这个标识可以根据实际情况调整，并在resourceQuery里写对应可以捕获到的规则。

使用oneOf的第一种处理规则：

import DownloadIcon from 'path/to/download.svg?rc';

使用oneOf的第二种处理规则

import DownloadIcon from 'path/to/download.svg';

参考

www.webpackjs.com/configurati… www.webpackjs.com/configurati…