Webpack 설정 및 실행

Webpack 설정 파일은 보통 webpack.config.js라는 이름으로 프로젝트 루트 경로에 생성합니다.

기본 설치

프로젝트에 Webpack을 설치하려면 다음 명령어를 사용합니다.

npm install webpack webpack-cli --save-dev

webpack.config.js 기본 구조

const path = require('path');

module.exports = {
  // 모드 설정 (development, production, none)
  mode: 'development',
  
  // 엔트리포인트 (진입점)
  entry: './src/index.js',
  
  // 컴파일 결과물 출력 설정
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true, // 빌드 이전 결과를 제거
  },
};

스크립트로 실행하기

package.json 파일에 Webpack 실행 스크립트를 추가하여 쉽게 빌드할 수 있습니다.

{
  "scripts": {
    "build": "webpack"
  }
}

이제 터미널에서 npm run build를 실행하면 Webpack이 src/index.js를 읽어 dist/bundle.js 결과물을 생성합니다.