webpack과 swc를 사용해서 세팅한 예시 프로젝트 입니다. package.json을 보시면 devDependencies에 개발용으로 설치한 패키지들이 있는데요, webpack 관련 패키지와, swc관련 패키지를 설치한 다음에,webpack.config.js 라는 설정 파일을 만들어서 웹팩 번들러를 설정해주고 (나중에 npm 스크립트에서 webpack 명령어를 실행하면 이 파일을 읽어서 번들러가 동작합니다.).swcrc 라는 설정 파일을 만들어서 swc에서 어떤 옵션으로 트랜스파일링할지 설정해줍니다. (이 파일은 나중에 webpack.config.js 파일 안에 있는 swc-loader 옵션에서 swc 가 사용합니다.)웹팩 설정 파일의 경우에는 옵션이 너무 많고 복잡하고 웹팩 버전마다 형식이 달라서 저도 세팅할 때마다 매번 새로 문서를 확인하고 사용하는데요... (이런 점이 삽질 이라고 표현한 부분입니다)소스 코드를 살펴보시면서 어느정도 궁금증이 해결되셨으면 좋겠습니다.

오 선생님이 직접 답변 달아 주셨군요 ㅎㅎ 예시까지 정말 감사합니다!

하나만 더 질문드려도 될까요? create-react-app이나 next.js 같은 데서 기본으로 되어 있는 설정을 쓰지 않고 직접 세팅하는 것이 흔한 일인가요? 실용적인 관점에서 그럴 만한 이유가 많이 있나요?

아무래도 기본적인 세팅을 사용 하면 세세한 설정은 힘들기 때문에 큰 프로젝트에서는 커스터마이징을 하거나, 직접 세팅을 하게 되는 거 같아요. 직접 개발환경을 세팅하게 되면 꼭 필요한 코드들만 사용하기 때문에 그만큼 방문자들에게 제공하는 자바스크립트 용량이 줄어든다는 장점도 있습니다.

Next.js 같은 경우에는 기본적인 세팅에서 커스텀해서 많이 사용하는 편인 것 같고,
create-react-app에서도 웹팩 설정 같은 것들을 커스텀할 수 있는데 뭔가 지원이 매끄럽지는 않은지(craco 라는 프로젝트가 있습니다. https://github.com/gsoft-inc/craco)
create-react-app을 그대로 실제 제품 개발에 쓰는 경우는 많이 없는 것 같습니다.
그래서 주로 직접 개발환경 세팅을 하게 되는 거 같습니다.
(어디까지나 이건 제 개인적인 생각이라 참고만 해주세요!)

감사합니다 :)