I have limited experience with both, however, I had a basic question based on my understanding of what they do. A webpack loader seems to be converting source from one form to another. Babel, on the other hand (is a transpiler) that converts your new JavaScript code into old JavaScript code (that runs on all browsers).
Both seem to do a very similar thing. Why can't we just use a webpack loader that "converts new JavaScript code into old JavaScript code" instead of using Babel in the pipeline?
You are almost right in your understanding, except for the use case of a loader and a transpiler. A loader is a generic term in the Webpack ecosystem while a transpiler is an example of a loader (e.g. babel-loader is a loader whose duty is to transpile your JavaScript code).
Why can't we just use a Webpack loader that "converts new JavaScript code into old JavaScript code " instead of using Babel in the pipeline?
Because there's no loader that transpiles your JavaScript code that comes with Webpack. Here's a list of loaders. The Webpack team maintains some of them.