webpack 관련 질문

Question

요렇게 했더니 CommonJs문법이어서 npx webpack 에러나는데, package.json에 "type":"module", 로 해서 에러나는건가여? ESM방식으로 webpack.config.js를 만들면 되는게 맞나여?

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. Minkoo Lee님. Webpack 설정에서 발생한 에러에 대해 설명드리겠습니다. Webpack을 사용하면서 CommonJS 와 ES Module 간의 차이는 종종 혼란을 일으킬 수 있습니다. 보통 package.json 에 "type": "module" 을 설정하면 Node.js에서 ES Module 방식을 사용하겠다는 의미인데, 이 경우 Webpack 설정 파일도 ES Module 스타일로 작성해야 합니다. 해결 방법 현재 상황에서는 Webpack 설정 파일을 ESM 으로 변환하는 것이 필요합니다. 이를 위해서는 require 대신 import 를 사용하며, module.exports 대신 export default 를 사용해야 합니다. 아래는 webpack.config.js 를 ESM 방식으로 변환한 예시입니다: // webpack.config.mjs (파일 확장자를 mjs로 바꿔야 ES Module로 인식됩니다) import path from 'path'; export default { entry: './src/index.js', output: { path: path.resolve(process.cwd(), 'dist'), filename: 'main.js', }, }; 추가 참고사항 Webpack에서 설정 파일을 ESM 으로 사용할 경우, 파일 확장자를 .mjs 로 변경하거나, Node.js에서 --experimental-modules 플래그를 사용하기도 합니다. ESM 방식으로 설정했기에, Webpack을 실행할 때 npx webpack 명령에서 --config 옵션을 사용해 명시적으로 설정 파일을 지정해 주세요: npx webpack --config webpack.config.mjs 유사한 문제를 해결하는 데 도움이 될 수 있는 게시물을 함께 참고해 보시기 바랍니다: Webpack에서 CommonJS와 ES Modules 문제 해결 방법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.