webpack 관련 질문

안녕하세요, 인프런 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 문제 해결 방법

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

해결 방법

추가 참고사항