webpack raw-loader 打包问题

昨天（2021-10-13）一个react项目打包后的页面样式全乱了，而本地开发时样式是正常的，花了半天时间研究了这个问题，现在把整个过程记录下。

先说下原因，原因是一个同事在 webpack.config.js 里的 module  rules 下面新加了一个规则

{
    test: /\.svg$/,
    use: ['raw-loader']
},

这个规则会把 svg 图片里的内容读成字符串，但我在我的js文件里引入了 iconfont.css

import './style/repairIcon/iconfont.css'

继续追踪下去发现 iconfont.css 里有一行代码

url('iconfont.svg?t=1594257335620#iconfont')

就是这行代码导致打包后的css文件不能用，在没有在 webpack.config.js 里加入上面那个规则的时候，这行代码在打包后的css里是这样的

url(/static/media/iconfont.****.svg)

加了上面这个规则后，这行代码在打包后的css里就变成了这样

url('********')

raw-loader插件把 iconfont.svg 里的内容都读成了字符串写入了打包后的css里，svg内容字符串里有换行符，在mac电脑上打包时换行符是 \n，在css文件里不会出错，
但在window电脑上打包的css文件里换行符变成了 /n，导致打包后的css文件报错，整个css文件都不能用

我思考后解决方法有两种：
1、我查看了代码后发现没有用到 iconfont.css，就不再引入 iconfont.css

//import './style/repairIcon/iconfont.css'

2、第二种方法我没有实践过，在

{
    test: /\.svg$/,
    use: ['raw-loader']
},

这个配置规则里加一个 exclude 参数，把某些svg图片排除