Webpack은 JavaScript 애플리케이션을 번들링하기 위한 강력한 모듈 번들러입니다. 애플리케이션을 번들링하기 위해 Webpack을 사용할 때, 가장 기본적인 설정은 entry와 output 설정입니다. 이 설정은 Webpack에게 애플리케이션의 진입점(entry point)과 번들링된 파일의 출력 경로(output path)를 알려줍니다.

entry 설정

entry 설정은 Webpack이 애플리케이션 번들링을 시작할 파일을 지정하는 역할을 합니다. 보통, 애플리케이션의 주요 진입점이 될 JavaScript 파일을 지정합니다.

Webpack에서 entry 설정은 다음과 같은 형식으로 작성됩니다:

module.exports = {
  entry: './src/index.js',
  // ...
};

위 예시에서 ./src/index.js는 애플리케이션 진입점으로 사용될 JavaScript 파일의 경로를 나타냅니다. 이 경로는 프로젝트 구조와 파일 이름에 따라 변경될 수 있습니다.

output 설정

output 설정은 Webpack이 번들링된 결과물을 생성할 경로와 파일명을 지정하는 역할을 합니다. 이 설정은 다음과 같이 작성됩니다:

const path = require('path');

module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
};

위 예시에서 path는 번들링된 파일의 출력 경로를 나타내고, filename은 생성된 번들 파일의 이름을 나타냅니다. path.resolve() 함수는 현재 작업 디렉토리와 dist라는 디렉토리를 결합하여 최종 경로를 생성합니다.

이렇게 설정을 작성하면 Webpack은 entry로 지정한 파일을 기준으로 애플리케이션을 번들링하고, output으로 지정한 경로에 번들 파일을 생성합니다.

결론

entry와 output 설정은 Webpack에서 기본적으로 설정해야 할 중요한 옵션입니다. entry는 애플리케이션의 진입점을, output은 번들링 결과물의 출력 경로와 파일명을 지정합니다. 이 설정을 올바르게 작성하면 Webpack은 애플리케이션을 번들링하여 원하는 경로에 번들 파일을 생성할 수 있습니다.

참고 문서: Webpack - Configuration