How to solve Webpack and svg image loader regex conflict fonts?

Question

Here is my regular expression for fonts and the svg image downloader, and they are in conflict because they are both targeting a * .svg file. How to solve it?

 {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

You can use excludeand includeto correct the problem. Sort of:

{
    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]'
}

Note:

• Replace MY-FONTS-FOLDERthe actual fonts folder path.
• You can also use regex for matching font.svgfor the file loader and .svgBUT NOT font.svg(possibly a negative lookup) for url-loader.