플러그인 (Plugins)

로더(Loader)가 특정 파일 단위의 변환 처리를 담당한다면, 플러그인(Plugin)은 번들된 결과물을 처리하거나 빌드 프로세스 전반에 관여하여 더 광범위한 작업을 수행합니다. 환경 변수 주입, 결과물 난독화/압축, HTML 템플릿 처리, 애셋 추출 등이 이에 해당합니다.

주요 플러그인

• HtmlWebpackPlugin: 번들링된 자바스크립트 파일을 자동으로 포함하는 HTML 파일을 생성합니다.
• MiniCssExtractPlugin: CSS를 별도의 파일로 추출하여, 번들 파일 크기를 최적화하고 병렬 로딩을 가능하게 합니다.
• DefinePlugin: 컴파일 타임에 사용할 수 있는 전역 상수를 정의합니다 (Webpack 내장 플러그인).
• CopyWebpackPlugin: 변경되지 않는 정적 애셋(이미지, 폰트 등)을 출력 디렉토리로 그대로 복사합니다.

플러그인 설정 및 사용

플러그인을 사용하려면 require()를 통해 해당 플러그인을 불러온 다음 설정 파일의 plugins 배열 필드에 추가해야 합니다.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 플러그인용

module.exports = {
  // ... 생략 ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 원본 HTML 템플릿
    }),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('development')
    }),
  ],
};

각 플러그인은 생성자(new)로 인스턴스를 만들어야 여러 목적으로 플러그인을 여러 번 재사용할 수 있습니다.