webpack을 쓰기 때문에 import를 쓸 수 있다?

개념에 대해서 깊게 파다가 의문이 생겨 질문드려요

es6 문법인 import export와 commonJS 명세를 따르는 require, module.exports가 있고 런타임인 노드는 기본적으로 commonJS 명세를 따르기 떄문에 require을 쓰는 것이고 프론트는 '바벨'을 사용하는 경우가 많기 때문에 es6문법을 commonJS 명세로 바꾸어줘서 사용 가능하다

제가 제대로 이해한 것이 맞나요? 바벨은 문법을 변환하고, 웹팩은 파일들 합쳐준다는데 개념이 헷갈려서 질문드립니다