Plugins

플러그인은 webpack의 기본입니다. Webpack 자체는 webpack 설정에서 사용하는 것과 동일한 플러그인 시스템으로 구축되어 있습니다.

로더가 할 수 없는 다른 작업을 수행할 목적으로 제공됩니다.

Anatomy

webpack 플러그인은 apply 메서드를 가지고 있는 객체입니다. apply 메서드는 webpack 컴파일러에 의해 호출되며, 전체 컴파일 라이프사이클에 접근 할 수 있습니다.

ConsoleLogOnBuildWebpackPlugin.js

const pluginName = "ConsoleLogOnBuildWebpackPlugin";

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

export default ConsoleLogOnBuildWebpackPlugin;

컴파일러 훅의 탭 메서드의 첫 번째 파라미터는 플러그인 이름의 카멜화된 버전으로 작성하는 것이 좋습니다. 모든 훅에서 재사용 할 수 있도록 하기 위해서 상수를 사용하는 것이 좋습니다.

Usage

플러그인은 매개변수 및 옵션을 사용할 수 있으므로, webpack 설정에서 plugins 속성에 새로운 인스턴스로 전달해야 합니다.

webpack을 사용하는 방법에 따라 여러 가지 방법으로 플러그인을 사용 할 수 있습니다.

Configuration

webpack.config.js

import path from "node:path";
import { fileURLToPath } from "node:url";
import webpack from "webpack"; // 내장 plugin에 접근

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

export default {
  entry: "./src/index.html",
  experiments: {
    html: true,
  },
  output: {
    filename: "my-first-webpack.bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: "babel-loader",
      },
    ],
  },
  plugins: [new webpack.ProgressPlugin()],
};

ProgressPlugin은 compilation 중 진행 상황의 보고 방식을 설정합니다. src/index.html이 엔트리이므로 webpack은 해당 페이지를 내보내고 참조된 <script src>를 빌드된 청크로 재작성합니다. 별도 plugin은 필요하지 않습니다. Native HTML을 참고하세요.

Node API

Node API를 사용할 때 설정의 플러그인 속성을 통해 플러그인을 전달 할 수도 있습니다.

some-node-script.js

import webpack from "webpack"; // webpack 런타임에 접근하기 위함
import configuration from "./webpack.config.js";

const compiler = webpack(configuration);

new webpack.ProgressPlugin().apply(compiler);

compiler.run((err, stats) => {
  // ...
});

Writing your own

플러그인 작성하기 가이드는 위의 객체를 시작으로 옵션, 비동기 훅, watch 모드를 위한 파일 디펜던시, 타입, 테스트까지 갖춘 실제 플러그인으로 발전시킵니다.

플러그인이 올바르게 동작하는지를 결정하는 두 가지 요소가 있으며, 둘 다 어떤 훅을 탭하느냐에 관한 것입니다.

Where the hooks live

빌드 라이프사이클은 각 훅이 속한 단계를 보여줍니다. 훅은 해당 훅을 소유하는 객체에 속하며, 두 개의 레퍼런스 페이지에서 실행 순서대로 나열되어 있습니다.

컴파일러 훅 — 빌드당 한 번, 전체 실행을 감싸는 훅: run, watchRun, compile, make, emit, done.
컴파일레이션 훅 — 단일 빌드 내에서 모듈, 청크, 애셋에 걸쳐 동작합니다.

컴파일러는 실행한 빌드보다 오래 존재합니다. watch 모드에서는 매번 리빌드 시 동일한 Compiler에서 새로운 Compilation이 생성됩니다. 리빌드 후에도 유지되어야 하는 상태는 컴파일러에, 단일 빌드에 관한 상태는 컴파일레이션에 저장해야 합니다.

Creating or changing assets

작업에 맞는 stage를 지정하여 processAssets에서 처리하세요. 새 파일을 내보내려면 PROCESS_ASSETS_STAGE_ADDITIONAL, 최소화하려면 PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE 등을 사용합니다.

Edit this page·

« Previous

Loaders

Configuration

7 Contributors

Translators

limong