[Web] Webpack이란 무엇일까?

Webpack은 웹 애플리케이션 개발에서 자주 사용하는 모듈 번들러(module bundler)이다.

자바스크립트, CSS, 이미지 등 다양한 파일을 의존성 그래프(dependency graph)로 관리하고 이를 하나 또는 여러 개의 번들(bundle) 파일로 묶어준다.

이 과정을 통해 애플리케이션의 성능을 최적화하고, 배포를 쉽게 만들어주는 역할을 한다.

쉽게 말해 주방의 요리사로 비유할 수 있다.

 

모듈 번들러에 대해 잘 모른다면?

[Web] 모듈 번들러, 한 페이지로 끝내기

 

1. 핵심 개념

• Entry (진입점) : 웹 애플리케이션의 시작점으로, Webpack이 의존성 그래프를 생성하기 위해 분석을 시작하는 파일
  • 마치 요리사가 요리를 시작하는 재료(파일)로 비유할 수 있다.
  • 예: index.js

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

• Output (출력) : Webpack이 번들링한 결과물을 어디에 저장할지 설정
  • 마치 최종적으로 완성된 요리(번들 파일)로 비유할 수 있다.
  • 예: dist/main.js에 번들 파일 저장

module.exports = {
  output: {
    path: __dirname + '/dist',
    filename: 'main.js',
  },
};

• Loaders (로더) : Webpack은 기본적으로 자바스크립트와 JSON 파일만 처리할 수 있어 CSS, 이미지, 폰트 같은 파일을 처리하기 위해 사용 (파일 변환에 초점)
  • 마치 재료를 다듬는 도구(칼, 믹서기)로 비유할 수 있다.
  • 예: css-loader와 style-loader를 사용하여 CSS 파일 처리

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

• Plugins (플러그인) : 추가적인 작업(HTML 생성, 환경변수 정의, 번들 최적화 등)을 처리
  • 마치 요리를 꾸미거나 특별한 맛을 내는 추가 작업으로 비유할 수 있다.
  • 예: HtmlWebpackPlugin을 사용하여 HTML 파일 자동 생성

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

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

• Mode (모드) : 개발 환경과 프로덕션 환경에 맞는 최적화를 적용
  • 종류
    • development: 디버깅에 적합한 설정
    • production: 성능 최적화 중심 설정
  • 마치 요리사가 실험을 하거나 맛을 보며 요리를 준비하는 상황(development모드)이나 손님에게 제공할 완벽한 요리를 준비하는 상황(production 모드)으로 비유할 수 있다.

module.exports = {
  mode: 'development', // 또는 'production'
};

 

 

2. 작동 방식

1. Entry에서 시작하여 의존성을 분석합니다.
2. 필요한 모든 파일을 로더를 통해 처리합니다.
3. 번들링을 수행하여 Output으로 결과물을 생성합니다.
4. 플러그인을 통해 추가적인 작업을 수행합니다.

 

3. 장점

• 모듈화: 모든 자산(자바스크립트, CSS, 이미지 등)을 모듈처럼 관리.
• 의존성 관리: 파일 간의 의존성을 자동으로 분석하여 효율적인 번들링.
• 최적화: 코드 스플리팅(Code Splitting), 트리 쉐이킹(Tree Shaking) 등으로 애플리케이션 크기 감소.
• 유연성: 다양한 로더와 플러그인을 조합하여 원하는 대로 설정 가능.

 

4. 예시

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

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