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

Question

Here is my regex for fonts and svg image loader and they are in conflict, since they both target *.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 exclude and include to eliminate the problem. Something like:

{
    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-FOLDER with the actual fonts folder path.
• You might also use regex to match font.svg for the file-loader and .svg BUT NOT font.svg(maybe negative lookahead) for url-loader.