0

I need to match a file extension for webpack rules using regex. I want to make two separate rules for targeting svg files: *.svg and *.icon.svg. These rules must be mutually exclusive. It's easy to caputure *.icon.svg scenario by testing for /\.icon.svg$/. But what should be the expression to capture all .svg extensions, excluding the files that end with .icon.svg?

Rule example for the .icon.svg

config.module.rules.push({
    test: /\.svg$/,
    loader: 'vue-svg-loader'
})
Jan Franciszek Cieślak
  • 768
  • 1
  • 8
  • 16

2 Answers2

3

To match all .svg files EXCEPT .icon.svg

/(?!.*\.icon\.svg$)^.+\.svg$/

To match only the .icon.svg:

/\.icon\.svg$/

So, that is going to look something like:

{
    // match all .svg files EXCEPT .icon.svg
    test: /(?!.*\.icon\.svg$)^.+\.svg$/,
    loader: 'specific-loader-name'
},
{
    // Match only .icon.svg files
    test: /\.icon\.svg$/,
    loader: 'different-loader'
},
KevBot
  • 17,900
  • 5
  • 50
  • 68
0

this shall do the trick.

{
   test:/^(?!.*.icon)\.svg$/i 
   ...
}

this regex use a thing called negative lookahead, so basically it will exclude anything that contains .icon before ".svg"

Victor Ribeiro da Silva Eloy
  • 4,051
  • 3
  • 25
  • 33