Pattern matching to identify related subgroups within a directory's items (webpack vendor packages)

Currently, I am working on creating two different vendor bundles using regex expressions in Webpack.

Here is an overview of the contents of my node_modules directory:

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

The first bundle, known as the "essentials" bundle, should include only jquery and core-js.

  • core-js
  • jquery

For the second bundle, it needs to contain all other packages from the node_modules directory except for jquery and core-js (such as jquery-ui).

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

These are my current regex patterns:

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

The issue lies in the fact that the second regex pattern does not match any libraries starting with jquery*, possibly due to the negative lookahead clause preceding jquery.

javascriptregexnpmwebpackwebpack-4

Answer №1

To ensure accurate matching, it is important to include a check for the forward slash character '/' after 'jquery' or 'core-js', as you only want to fail them if they appear as whole subfolder names:

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

If the end of the string is also a possibility, consider using the following alternative:

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

You can see this in action on this regex demo.

Note that replacing [a-zA-Z0-9-_]+ with [^\/]+, which matches any 1+ characters other than '/', may be more versatile. However, feel free to stick with your original pattern if it better suits your specific requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An issue occurred during the execution of an AJAX call triggered by the onsubmit

When triggering a JavaScript function using the onSubmit event of a textfield, it looks like this: <form action="#" onsubmit="getTestResults()"> <input class="button2" type="text" name="barcode" > </form> The JavaScript function bein ...

javascriptjqueryajax

Steps to send an object array using a promise

I've put in a lot of effort but haven't found a solution that works well for me. I attempted using promise.all and setting the array globally, but it didn't work out. My goal is to search through three MongoDB collections, match the finds, ...

javascriptnode.jsexpresspromise

Protractor - selecting a button within a table

Following the HTML code provided below, there is a table containing a list of test site links with a delete button next to each test site. /* Element locators in the table */ var testSiteLinks = element.all(by.css('a[ui-sref^="testpages"]')); ...

javascriptangularjsprotractorangularjs-e2e

Angular applications with separate, autonomous routers

Imagine having a massive enterprise application divided into multiple independent submodules (not to be confused with angular modules). I prefer not to overwhelm the routing in a single location and wish for these autonomous modules (non-angular modules) ...

javascriptangularjsangularjs-routing

Using the Greasemonkey browser extension, one can employ the waitForKeyElements utility to trigger a function once a designated element becomes visible on the webpage

(In connection to the question I posted on Stack Overflow). I have been developing a userscript for metal-archives.com, which can be found here. When you navigate to a band page (like this example), you will see the DISCOGRAPHY section and its sub-tabs ...

javascriptjquerygreasemonkey

ng-view or controller appears to be malfunctioning

I'm currently working on a small web application using AngularJS. I have an index.html file in the main directory and three other HTML pages within the html subdirectory. login.html list.html detail.html Initially, the index.html should load the ...

javascriptangularjscontrollerurl-routing

Jhipster 4 project performs well initially, however, upon creating an entity, the page appears empty despite the application running

I am currently working on a project and trying to run it following the steps outlined in https://github.com/JinnaBalu/jhipster4-mongodb. The project runs smoothly, however, after generating an entity using "yo jhipster:entity", I tried to run it again bu ...

mongodbangulartypescriptwebpackjhipster

Dealing with socket timeout issues in an express router

When using an express app as an API server, I want to be able to detect on the router level when a client has been disconnected due to a socket timeout. I also need to retain the response for when the client sends another request in the future. This part ...

javascriptnode.jsexpresserror-handling

Steps for updating a single field in multiple nested array documents using findOneAndUpdate

Having trouble updating a single value within a multi-nested array of documents using findOneAndUpdate. The condition is as follows: Update the warehouse amount where the productCode is "abc123", size "41" in warehouse "Hamburg". Only getting back null ...

javascriptmongodbmongoose

running into an issue while attempting to utilize socket.io

Currently, I am utilising the socket.io swift client on my Iphone SE. Below is the swift code snippet: let socket = SocketIOClient(socketURL: URL(string: "http://example.com:4000")!, config: [.log(true), .forcePolling(true)]); socket.connect(); ...

javascriptiosnode.jsswiftsockets

Tips for removing the default confirm action for onrowdelete in Reactjs:booleanIs there a way to eliminate the default onrowdelete confirm event

Is there a way to modify the default onrowdelete confirm action message in Material-UI table for Reactjs? ...

javascriptreactjsmaterial-ui

Hide Address with Jquery Dialog Box

How can I securely redirect a user to another page within the same website? In my specific situation, I have a form where users input information. For cancellations, they should have options available. When a user clicks the cancellation button, a dialog ...

javascriptjqueryjquery-mobile

Extracting information from the fileuploadfield in Ext JS 3

Currently utilizing Ext.ux.FileUploadField within Ext JS 3.3.1. Aiming to retrieve the file data from the form without having to submit it. Wondering if anyone has insight on whether this is feasible. Currently able to view the filename but not the actual ...

javascriptfile-uploadextjsextjs3

Can the vacant space on an HTML page be determined through calculation?

Could someone please help me figure out the amount of empty space on a html page? https://i.sstatic.net/VXzbz.png Is it possible to determine the area highlighted in red using javascript? Apologies if this question seems trivial. ...

javascriptcsshtml

Additional pixels for chat scrolling in AJAX are needed

Hey there! I finally cracked the code on how to prevent chat scrolling when a user scrolls up to read, and then resume scrolling once they reach the bottom. However, I've encountered a hitch - the chat adds an extra 17px when I set a size for each po ...

javascriptjqueryhtmlcss

Are Javascript's JSON.stringify and PHP's json_encode equivalent functions?

When attempting to hash stringified data using HMAC SHA256 in both JavaScript (with CryptoJS Libraries) and PHP (using the built-in HMAC function), I am concerned about potential inconsistencies between JavaScript's JSON.stringify and PHP's json_ ...

javascriptphpjsoncryptojs

Show the current time of a track using VueJS

Is there a way to have the time continuously update itself without needing to click on anything? When I press play, I want the seconds to automatically start updating from 0:00 until the end of the audio track. Currently, the time only updates when clicked ...

javascriptvue.jsnuxt.js

The TypeScript compiler is indicating that the Observable HttpEvent cannot be assigned to the type Observable

Utilizing REST API in my angular application requires me to create a service class in typescript. The goal is to dynamically switch between different url endpoints and pass specific headers based on the selected environment. For instance: if the environmen ...

javascriptangulartypescript

Creating a custom string subtype in TypeScript

I am currently working on developing a game called Risk using TypeScript and React hooks. This game is played on a map, so my first step was to design a MapEditor. The state of the Map Editor is as follows: export interface IMapEditorState { mousePos: ...

javascripttypescriptreact-hooks

Obtain the receptacles containing input fields along with their corresponding values

Looking to retrieve a DOM container with input texts inside, but when saved to the database the input values are not included. Tried methods: $(".container").html() $(".container").prop('outerHTML') $(".container").text() $(".container").get(0) ...

javascriptjqueryhtml