정적 리소스(이미지, 스타일 시트 등)는 웹 개발에서 중요한 부분이다. 이러한 정적 리소스들을 효율적으로 관리하고 번들링하기 위해서 Webpack을 사용할 수 있다. Webpack은 모듈 번들러로써, 여러 파일들을 하나의 번들에 포함시켜준다.

Webpack 설치하기

먼저, Webpack을 설치해야 한다. 다음 명령어를 사용하여 전역에 Webpack을 설치한다:

npm install -g webpack

Webpack 설정 파일 생성하기

Webpack을 사용하기 위해서는 webpack.config.js 파일을 생성해야 한다. 이 파일은 Webpack에게 어떻게 번들링해야 할지 알려준다. 다음은 기본적인 설정 파일의 예이다:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[name].[ext]',
              outputPath: 'images/',
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

위 설정 파일에서, entry는 번들링을 시작할 진입점 파일을 지정한다. output은 번들링된 파일의 이름과 경로를 설정한다. module.rules는 정적 리소스를 처리하기 위한 로더(loader)를 정의하는 부분이다. 위 예제에서는 이미지 파일에 대해서는 file-loader를, CSS 파일에 대해서는 style-loader와 css-loader를 사용한다.

Webpack으로 번들링하기

Webpack 설정이 완료되면, 다음 명령어를 사용하여 웹 애플리케이션을 번들링할 수 있다:

webpack

이 명령어를 실행하면 Webpack은 설정 파일을 읽고 정적 리소스들을 한 번의 번들로 만들어 출력 디렉토리에 저장한다.

결론

Webpack을 사용하여 정적 리소스를 효율적으로 관리하는 방법에 대해 알아보았다. Webpack은 다양한 로더와 플러그인을 제공하여 더욱 강력한 기능을 제공한다. 보다 자세한 내용은 Webpack 공식 문서를 참조하면 좋다.