웹팩(Webpack)은 모듈 번들러(Module Bundler) 로, 프론트엔드에서 사용되는 여러 모듈 및 자원들을 하나로 묶어주는 도구입니다. 웹팩 설정 파일을 통해 프로젝트의 빌드 과정을 자세하게 제어할 수 있습니다.

웹팩 설정 파일 만들기

웹팩 설정 파일은 주로 프로젝트 루트 디렉토리에 webpack.config.js 파일로 생성합니다. 만약 TypeScript로 개발하는 경우, TypeScript 설정 파일(tsconfig.json)도 함께 필요하며, 이 파일은 TypeScript의 컴파일러 설정을 담당합니다.

아래는 간단한 웹팩 설정 파일의 예시입니다.

// webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

위 예시에서는 src 디렉토리에 있는 index.ts 파일을 시작으로 번들링하며, TypeScript 파일은 ts-loader를 이용해서 로드하고 컴파일합니다. 물론 실제 프로젝트에 따라 더 다양한 설정이 필요할 수 있습니다.

웹팩 실행

웹팩을 실행하면 설정 파일을 기반으로 설정된 동작을 수행합니다. 보통 터미널에서 명령어를 입력하여 실행할 수 있습니다.

npx webpack

위 명령어는 npx를 이용하여 프로젝트 의존성에 설치된 웹팩을 실행하는 예시입니다.

웹팩은 이러한 설정을 기반으로 소스코드를 번들링하고 필요한 모듈 및 리소스를 로드하여 빌드된 결과물을 생성합니다.

마무리

웹팩 설정 파일은 프로젝트의 빌드 과정을 세밀하게 제어할 수 있는 중요한 파일입니다. TypeScript로 개발하는 경우 TypeScript 설정 파일과 웹팩 설정 파일을 함께 사용하여 효율적인 개발 환경을 구성할 수 있습니다.

이 외에도 웹팩의 다양한 설정 및 플러그인들을 통해 프로젝트에 따라 다양한 기능을 추가할 수 있으니, 필요에 따라 공식 문서나 다른 참고 자료를 참고하여 웹팩을 더욱 효율적으로 활용해보세요.