如何解决Webpack字体和svg图像加载器正则表达式冲突？

Question

这是我的字体和svg图像加载器的正则表达,他们是冲突的,因为他们都目标*.svg文件.怎么解决？

 {test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file?name=/Presentation/_dist/fonts/Interstate/[name].[ext]'},
 {test:/\.(png|jpg|gif|svg)$/, loader: 'url?limit=10000&name=/Presentation/_dist/images/[name].[ext]'}

Answer 1

您可以使用exclude并include消除问题.就像是:

{
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    include: [
        path.resolve(__dirname, "MY-FONTS-FOLDER")
        //, Any other svg font path
    ],
    loader: 'file?name=/Presentation/_dist/fonts/Interstate/[name].[ext]'
},
{
    test:/\.(png|jpg|gif|svg)$/,
    exclude: [
        path.resolve(__dirname, "MY-FONTS-FOLDER")
        //, Any other svg font path
    ],
    loader: 'url?limit=10000&name=/Presentation/_dist/images/[name].[ext]'
}

注意:

• 替换MY-FONTS-FOLDER为实际的字体文件夹路径.
• 您也可以使用正则表达式来匹配font.svg文件加载器,而.svg不是font.svg(对于url-loader来说可能是负向前瞻).