플러그인

플러그인 (Plugins)

플러그인은 webpack의 뼈대(backbone)예요. 실제로 webpack 자체도 설정에서 쓰는 것과 똑같은 플러그인 시스템 위에 만들어져 있어요. 또한 로더가 할 수 없는 "그 밖의 모든 일"을 처리하는 역할을 해요. webpack은 이런 유용한 플러그인을 많이 기본 제공해요.

출처: Webpack — Plugins

플러그인의 구조

webpack 플러그인은 apply 메서드를 가진 자바스크립트 객체예요. 이 apply 메서드는 webpack 컴파일러가 호출하며, 컴파일 생명주기 전체에 접근하게 해 줘요.

// ConsoleLogOnBuildWebpackPlugin.js
const pluginName = "ConsoleLogOnBuildWebpackPlugin";

class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log("The webpack build process is starting!");
    });
  }
}

export default ConsoleLogOnBuildWebpackPlugin;

컴파일러 훅의 tap 메서드 첫 번째 인자는 플러그인 이름을 camelCase로 만든 값을 쓰는 걸 권장해요. 여러 훅에서 재사용할 수 있도록 상수로 정의해 두는 게 좋아요.

플러그인 사용하기

플러그인은 인자/옵션을 받을 수 있으므로, 설정의 plugins 속성에 new 인스턴스를 전달해야 해요.

// webpack.config.js
import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack"; // 내장 플러그인 접근용

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

export default {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
  },
  plugins: [
    new webpack.ProgressPlugin(), // 빌드 진행률 표시
    // 다른 플러그인들...
  ],
}

플러그인은 로더보다 더 넓은 작업을 하며, 번들 최적화, 자산 관리, 환경변수 주입, HTML 생성 등 다양한 용도로 쓰여요. 로더가 개별 모듈의 변환을 담당한다면, 플러그인은 번들 전체의 수명주기에 개입한다고 보면 돼요.

더 알아보기

• Entry Points
• Output
• Module Federation