6. Webpack의 핵심 개념 - 1

Webpack Entry와 Output 설정

Webpack은 모듈 번들러로서, 여러 개의 JavaScript 파일 및 다양한 모듈들을 하나의 파일로 묶어주는 역할을 합니다. 이를 위해 Webpack에서 가장 중요한 설정 중 하나가 'Entry'와 'Output'입니다. 이번 챕터에서는 이 두 가지 설정에 대해 자세히 알아보겠습니다.

1. Entry 설정

entry 설정은 Webpack이 어디에서부터 빌드를 시작할지를 지정하는 부분입니다. 주로 프로젝트의 진입점인 JavaScript 파일을 지정하게 됩니다.

// webpack.config.js

module.exports = {
  entry: './src/index.js', // 프로젝트 진입점 설정
  // ...
};

 

위의 예제에서 ./src/index.js는 프로젝트의 주 진입 파일로 지정되었습니다. 이 파일에서부터 Webpack은 의존성을 파악하고 번들링 작업을 수행합니다.

2. Output 설정

output 설정은 Webpack이 번들링한 결과물의 출력에 대한 설정입니다. 이 설정은 번들된 파일의 이름과 저장 경로를 지정합니다.

// webpack.config.js

const path = require('path');

module.exports = {
  // ...
  output: {
    filename: 'bundle.js', // 번들된 파일의 이름
    path: path.resolve(__dirname, 'dist'), // 번들된 파일의 저장 경로
  },
};

• filename: 번들된 파일의 이름을 지정합니다. 위의 예제에서는 bundle.js로 설정되어 있습니다.
• path: 번들된 파일의 저장 경로를 지정합니다. path.resolve 함수를 사용하여 상대 경로를 절대 경로로 변환합니다.

3. 번들링 실행

설정 파일을 작성한 후, Webpack 명령어를 통해 빌드를 실행합니다.

npx webpack

 

위의 설정대로라면 ./src/index.js 파일을 시작으로 하여 ./dist/bundle.js로 번들링이 될 것입니다.

Entry와 Output 설정은 Webpack 설정에서 기초가 되는 중요한 부분이므로 프로젝트에 따라 신중한 설정이 필요합니다. 이 설정을 통해 Webpack이 프로젝트를 어떻게 번들링할지에 대한 핵심적인 내용을 지정할 수 있습니다.