webpack - 如何解决 Webpack 字体和 svg 图像加载器 Regex 冲突？

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。