I've heard words like yarn, npm, babel, browserify, webpack recently?
Package Managers: Pretty self-explanatory, they pull in packages from other sources. In your list those are NPM and Yarn. The two use the same sources and can be used more or less interchangeably. I've found Yarn to be the better experience.
Transpilers: These tools will take in your source code and apply some meaningful transformations, such as turning code using new language features into old language features. In your list that's Babel. It's not necessary to use any, but can come in handy. Babel is the de-facto standard when it comes to plain JS, but there's also TypeScript (which adds a static type system to JS) and tools for other languages.
Bundlers: They take all your source files and link them, producing one or more "bundles" containing all your sources. They can also invoke the transpilers as a processing step. Those are Browserify and Webpack from your list. Others are Rollup, Parcel, ...
As for which you should use: it doesn't really matter, just get some template that works for you rather than spending a day wiring it up yourself, it's not worth it. If you want to do that for learning purposes, I'd go with Webpack, maybe Babel with preset-env, PostCSS and TypeScript if you want a type system.
Find anything that fits well into your existing toolchain and meets your requirements. Who cares what anyone else is using, right?