Regex to match complementary subgroups of a folder's contents (webpack vendor bundles)

Question

I'm trying to figure out two regex expressions that I'll use with Webpack to create two different vendor bundles.

Here's a simplified list of what my node_modules folder looks like:

• autonumeric
• core-js
• jquery
• jquery-ui
• jquery.watch
• marked

The first vendor bundle should be the "essentials" bundle, which, let's say, are jquery and core-js .

• core-js
• jquery

The second vendor bundle should contain all the other bundles in node_modules , except for jquery and core-js (That means the regex must match jquery-ui ).

• autonumeric
• jquery-ui
• jquery.watch
• marked

Here are my current regex expressions:

• essentials bundle: /node_modules\\/(jquery|core-js)\\/.*\\.js/
• "rest of" bundle: /node_modules(?!\\/(jquery|core-js))(\\/[a-zA-Z0-9-_]+)+\\.js

The problem is that the second regex doesn't match the jquery* libraries, probably because of the negative lookahead starting with jquery .

Answer 1

You need to add a check for the / char after jquery or core-js since you need to only fail them as whole subfolder name:

node_modules(?!\/(jquery|core-js)\/)(\/[^\/]+)+\.js
                                 ^^

Or, if there can also be end of string:

node_modules(?!\/(jquery|core-js)(\/|$))(\/[^\/]+)+\.js

See the regex demo

Note I also suggest replacing [a-zA-Z0-9-_]+ with a more generic [^\\/]+ that matches any 1+ chars other than / , but you may keep your pattern if your requirements are more specific.