We like shiny new features, but these features have varying levels of support cross-browser, or even no support at all.
A big part of what your browser does is nowadays is process JavaScript. JavaScript itself is just an implementation of the ECMAScript Standard. Your browser vendor has to implement this standard (in their own way) in order to be compliant. (See the Standard here.)
Now, let's say that you're favorite browser fails to implement some shiny new feature from the shiny new ES2019 that you really really want to use. Of course you could yolo use it anyway, but that might break many of your users.
To remedy this, people started using things called transpilers. Transpilers are able to take JavaScript written in your shiny new syntax, and transpile it into JavaScript that is compatible with a browser that does not yet support your shiny new syntax.
The cousin of the transpiler is the bundler. The bundler takes all of the transpiled files that you've imported and squeezes them all into one file, so that it's easy for your browser to consume.
Webpack is a bundler. Babel is a transpiler.
On top of wanting shiny new things that exist in the ECMAScript standard, JavaScript people also want shiny new things that do not exist at all! This is where TypeScript, React, SCSS, etc. come in. These syntaxes are NOT supported in the ECMAScript standard. Hence, we create a bunch of transpilers to convert their code into vanilla JavaScript, and then we simply bundle them.