Webpack 설명해줘

Webpack은 현대 웹 개발에서 자주 사용되는 자바스크립트 모듈 번들러입니다. 이를 통해 여러 파일과 모듈을 하나의 번들로 결합하여 웹 애플리케이션을 구축하고 배포하는 데 도움을 줍니다. 다음은 Webpack의 주요 기능과 개념에 대한 설명입니다:

주요 기능

1. 모듈 번들링:

   • Webpack은 여러 개의 자바스크립트 파일과 모듈을 하나의 번들로 결합합니다. 이로 인해 네트워크 요청 수가 줄어들고 애플리케이션 성능이 향상됩니다.

2. 코드 스플리팅:

   • 애플리케이션을 여러 번들로 나누어 로드 시간을 최적화할 수 있습니다. 예를 들어, 자주 사용되지 않는 기능을 별도의 번들로 분리하여 초기 로딩 속도를 개선할 수 있습니다.

3. 로더(Loaders):

   • Webpack은 다양한 파일 유형을 처리하기 위해 로더를 사용합니다. 예를 들어, CSS, 이미지, 폰트 등을 자바스크립트로 변환하는 데 사용됩니다.
   • 예: css-loader, babel-loader

4. 플러그인(Plugins):

   • Webpack의 기능을 확장하는 데 사용됩니다. 예를 들어, 번들을 최적화하거나 환경 변수를 설정하는 데 사용됩니다.
   • 예: HtmlWebpackPlugin, CleanWebpackPlugin

주요 개념

1. 엔트리(entry):

   • 애플리케이션이 시작되는 지점을 지정합니다. Webpack은 여기서부터 의존성 그래프를 만들어 필요한 모든 모듈을 포함한 번들을 생성합니다.
   • 예:

     module.exports = {
       entry: './src/index.js',
     };

2. 아웃풋(output):

   • 번들이 생성될 위치와 파일 이름을 지정합니다.
   • 예:

     module.exports = {
       output: {
         filename: 'bundle.js',
         path: path.resolve(__dirname, 'dist'),
       },
     };

3. 로더(loaders):

   • 특정 파일 유형을 처리하도록 Webpack에 지시합니다. 각 로더는 특정 파일 유형에 대한 변환 규칙을 지정합니다.
   • 예:

     module.exports = {
       module: {
         rules: [
           {
             test: /\.css$/,
             use: ['style-loader', 'css-loader'],
           },
         ],
       },
     };

4. 플러그인(plugins):

   • 추가적인 기능을 제공하고 번들링 과정을 최적화합니다.
   • 예:

     const HtmlWebpackPlugin = require('html-webpack-plugin');
     module.exports = {
       plugins: [
         new HtmlWebpackPlugin({
           template: './src/index.html',
         }),
       ],
     };

예시 구성

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],
  mode: 'development',
};

이 구성 파일은 기본적인 Webpack 설정을 보여줍니다. 여기에는 엔트리 포인트, 아웃풋 위치, CSS와 이미지 파일을 처리하는 로더, 그리고 HTML 파일을 생성하는 플러그인이 포함되어 있습니다.