webpack.config.js에서의 CommonJS방식에 대한 질문

Question

안녕하세요! 수업시간에 보면 webpack.config.js 웹팩 설정파일을 CommonJS방식으로 작성하였는데요, 웹팩은 Node.js에서 동작하는 프로그램이고, Node.js가 사용하는 모듈시스템이 CommonJS이므로 웹팩 설정파일을 CommonJS로 작성한 건 이해했습니다. 그런데 문득 드는 궁금증이, CommonJS 모듈 시스템을 채택했던 NodeJS 환경에서 ES Module 을 사용하려면 Babel과 같은 트랜스파일러(transpiler)를 사용했어야 했는데요. NodeJS 버전 13.2부터 ES모듈 시스템에 대한 정식 지원 이 시작됨에 따라 다른 도구 없이 NodeJS 에서 손쉽게 ES Module 을 사용할 수 있게 되었잖아요..? 그렇다면 노드버전 13.2부터는 webpack.config.js 를 CommonJS가 아닌, ES Module방식으로 작성해도 상관없는건가요?

smysmy · Answer

아하 아무런 조건 없이 esmodule을 사용할 수는 없을뿐더러, 아직까지는 대부분의 라이브러리와 프레임워크에서 CommonJS 모듈 시스템을 사용하는 것이 일반적이므로 CommonJS대신 esmodule을 사용하는것에 대해서는 아직까지는 논란이 될 수 있다는 말씀이시군요..!
두분 모두 답변해주셔서 너무 감사합니다! 많은 도움이 되었습니다!!

jeonghwan · Answer

말씀해 주셔서 저도 찾아 보았는데요. 기본은 common.js를 사용하고 esmodule을 사용하려면 추가 조치를 해야합니다. 아래 세 가지 중 하나 모듈 파일 확장자를 .mjs로 변경 package.json 파일의 type 필드를 module로 설정 노드 실행시 --input-type 사용 기존 관성에 따라서 commonjs 를 사용하고 있었던 것 같네요. 아무런 옵션없이 esmodule을 지원한다면 사용했을것 같긴합니다. 참고 https://nodejs.org/api/esm.html https://www.daleseo.com/js-node-es-modules/

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴이에요. 마치 실제 웹팩 환경과 같은 모던 시스템 환경에서 모듈 시스템 변화에 대한 적용과 관련된 질문이실 것 같습니다. Node.js에서 ES6의 모듈 시스템이 직접 지원되기 시작하였지만, 실제로 해당 모듈 시스템에 대해 어떤 환경에서 사용할 수 있는지는 여전히 논란이 많습니다. 작성하신 webpack.config.js에서의 CommonJS 방식은 ES6의 모듈시스템 적용과는 무관합니다. webpack을 사용하는 경우 CommonJS 모듈 시스템이 전범위적으로 사용됩니다. 이는 현재까지는 대부분의 라이브러리와 프레임워크가 CommonJS를 사용하는 것이 일반적이기 때문에 웹팩에서도 이를 따른 것입니다. 따라서 웹팩 설정파일에서도 여전히 CommonJS 방식으로 작성하는 것이 일반적이며, 현재의 Node.js 버전 13.2 이후의 ES 모듈 시스템 정식 지원 여부는 당장 웹팩에서 적용되는 부분은 아니라고 보면 됩니다. 직접적인 답변하여 말씀드리자면, 노드 버전 13.2부터 지원된 ES 모듈 시스템 정식 지원에 대한 일반적인 습득은 가능할 수 있지만 현재는 웹팩 뿐 아니라, 대부분의 라이브러리 및 프레임워크에서 여전히 CommonJS를 사용하고 있기 때문에, 웹팩 설정파일은 여전히 CommonJS 방식으로 작성하는 것이 일반적이요. 그 외에 다른 궁금한 내용이 있으시면 말씀해주세요. 감사합니다.