5. Webpack 설치와 설정 - 3

Webpack 기본 설정 파일 (webpack.config.js) 구성

Webpack을 사용하는 프로젝트에서 핵심적인 역할을 하는 것 중 하나는 webpack.config.js 파일을 통한 설정입니다. 이 파일은 Webpack에게 프로젝트를 빌드하는 방법을 알려주는 중요한 구성 파일입니다. 이번 챕터에서는 Webpack 기본 설정 파일을 구성하는 방법에 대해 알아보겠습니다.

1. webpack.config.js 파일 생성

프로젝트 루트 디렉토리에 webpack.config.js 파일을 생성합니다.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 시작점(entry point) 설정
  output: {
    filename: 'bundle.js', // 번들된 파일의 이름
    path: path.resolve(__dirname, 'dist'), // 번들된 파일의 경로
  },
};

2. 설정 파일 내용 설명

• entry: 웹팩이 빌드를 시작하는 진입점(entry point)을 설정합니다. 위 예제에서는 src 폴더의 index.js 파일을 시작점으로 지정했습니다.
• output: 번들된 결과물의 설정을 담당합니다.
  • filename: 번들된 파일의 이름을 설정합니다. 위 예제에서는 bundle.js로 설정되어 있습니다.
  • path: 번들된 파일의 저장 경로를 설정합니다. path.resolve 함수를 사용하여 절대 경로로 설정합니다.

3. 기본 설정 파일 적용

Webpack은 기본적으로 webpack.config.js 파일을 찾아 자동으로 설정을 적용합니다. 따라서 추가적인 명령어 없이 Webpack을 실행하면 해당 파일의 설정이 적용됩니다.

npx webpack

 

이제 기본적인 Webpack 설정 파일이 적용된 프로젝트를 빌드할 수 있습니다. 설정 파일을 수정하여 프로젝트에 필요한 로더(loader), 플러그인(plugin) 등을 추가할 수 있습니다.