Writing a Plugin

// A JavaScript class.
class MyExampleWebpackPlugin {
  // `apply`를 compiler를 인자로 받는 프로토타입 메소드로 정의합니다.
  apply(compiler) {
    // attach할 이벤트 훅을 지정합니다.
    compiler.hooks.thisCompilation.tap(
      "MyExampleWebpackPlugin",
      (compilation) => {
        // Specify the asset processing hook
        compilation.hooks.processAssets.tap(
          {
            name: "MyExampleWebpackPlugin",
            stage: compiler.webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
          },
          (assets) => {
            console.log("This is an example plugin!");
            console.log(
              "Here’s the `compilation` object which represents a single build of assets:",
              compilation,
            );
          },
        );
      },
    );
  }
}

class HelloWorldPlugin {
  apply(compiler) {
    // 이 훅은 빌드 프로세스가 완전히 완료되었을 때 실행됩니다.
    compiler.hooks.done.tap(
      "Hello World Plugin",
      (stats /* 훅의 탭이 끝나면 stats는 인자로 통과됩니다.  */) => {
        console.log("Hello World!");
      },
    );
  }
}

export default HelloWorldPlugin;

// webpack.config.js
import HelloWorldPlugin from "hello-world";

export default {
  // ... 여기서 구성을 설정할 것 ...
  plugins: [new HelloWorldPlugin({ options: true })],
};

import { validate } from "schema-utils";

// options 객체에 대한 schema
const schema = {
  type: "object",
  properties: {
    test: {
      type: "string",
    },
  },
};

export default class HelloWorldPlugin {
  constructor(options = {}) {
    validate(schema, options, {
      name: "Hello World Plugin",
      baseDataPath: "options",
    });
  }

  apply(compiler) {}
}

export default class HelloWorldPlugin {
  constructor(options = {}) {
    this.options = options;
  }

  apply(compiler) {
    compiler.hooks.validate.tap("HelloWorldPlugin", () => {
      compiler.validate(
        () => require("./schema/hello-world-plugin.json"),
        this.options,
      );
    });
  }
}

class HelloCompilationPlugin {
  apply(compiler) {
    // callback 함수에 인자로 compilation을 제공하는 훅으로 compliation 훅을 탭 합니다.
    compiler.hooks.compilation.tap("HelloCompilationPlugin", (compilation) => {
      // 이제 컴파일을 통해 이용할 수 있는 다양한 훅들을 이용할 수 있습니다.
      compilation.hooks.optimize.tap("HelloCompilationPlugin", () => {
        console.log("Assets are being optimized.");
      });
    });
  }
}

export default HelloCompilationPlugin;

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapAsync(
      "HelloAsyncPlugin",
      (compilation, callback) => {
        // Do something async...
        setTimeout(() => {
          console.log("Done with async work...");
          callback();
        }, 1000);
      },
    );
  }
}

export default HelloAsyncPlugin;

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapPromise(
      "HelloAsyncPlugin",
      (compilation) =>
        // 끝났을 때 해석을 반환해야 합니다..
        new Promise((resolve, reject) => {
          setTimeout(() => {
            console.log("Done with async work...");
            resolve();
          }, 1000);
        }),
    );
  }
}

export default HelloAsyncPlugin;

class FileListPlugin {
  static defaultOptions = {
    outputFile: "assets.md",
  };

  // 어떤 옵션이 플러그인의 생성자에 전달될 때,
  // (이는 플러그인의 public API입니다.)
  constructor(options = {}) {
    // 기본 옵션에 대해 사용자 지정 옵션을 적용하고
    // 병합된 옵션을 플러그인 메소드에 추가로 사용할 수 있게 합니다.
    // 여기서 모든 옵션을 확인해야 합니다.
    this.options = { ...FileListPlugin.defaultOptions, ...options };
  }

  apply(compiler) {
    const pluginName = FileListPlugin.name;

    // webpack 모듈 인스턴스는 컴파일러 객체로부터 접근할 수 있으며,
    // 이는 사용되는 모듈의 정확한 버전을 보장합니다.
    // (webpack 또는 직접적으로 어떤 심볼을 require/import 하지 말아야 합니다.)
    const { webpack } = compiler;

    // Compilation 객체는 몇 가지 유용한 상수에 대한 참조를 제공합니다.
    const { Compilation } = webpack;

    // Rawsource는 compilation에서 애셋 소스를 나타내는데
    // 사용해야 하는 "sources" 클래스 중 하나입니다.
    const { RawSource } = webpack.sources;

    // 이전 단계에서 compilation 프로세스를 추가로 탭하기 위해서는
    // "thisCompilation" 훅을 탭해야합니다.
    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
      // 특정 단계에서 애셋 처리 파이프라인으로 탭합니다.
      compilation.hooks.processAssets.tap(
        {
          name: pluginName,

          // 이후 애셋 처리 단계 중 하나를 사용하여
          // 모든 애셋이 이미 다른 플러그인에 의해 compliation에 추가되었는지 확인합니다.
          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
        },
        (assets) => {
          // "assets"는 compilation의 모든 애셋을 포함하는 객체이고,
          // 객체의 key는 애셋의 경로 이름입니다.
          // 그리고 values 파일 소스입니다.

          // 모든 애셋을 거쳐 반복하고
          // 마크다운 파일로 내용을 생성합니다.
          const content = `# In this build:\n\n${Object.keys(assets)
            .map((filename) => `- ${filename}`)
            .join("\n")}`;

          // 출력 디렉터리 webpack에 의해 자동으로 생성되도록
          // compilation에 새로운 애셋을 추가합니다.
          compilation.emitAsset(
            this.options.outputFile,
            new RawSource(content),
          );
        },
      );
    });
  }
}

export default FileListPlugin;

import FileListPlugin from "./file-list-plugin.js";

// 플러그인에 webpack 설정을 사용합니다.
export default {
  // …

  plugins: [
    // 기본 옵션을 사용하여 플러그인을 추가합니다.
    new FileListPlugin(),

    // 또는

    // 지원되는 옵션을 전달하도록 선택할 수 있습니다.
    new FileListPlugin({
      outputFile: "my-assets.md",
    }),
  ],
};

# In this build:

- main.css
- main.js
- index.html

class WatchNotifierPlugin {
  apply(compiler) {
    compiler.hooks.watchRun.tap("WatchNotifierPlugin", (compiler) => {
      if (compiler.modifiedFiles) {
        const changedFiles = [...compiler.modifiedFiles]
          .map((file) => `  • ${file}`)
          .join("\n");

        console.log(`\nFiles changed:\n${changedFiles}`);
      }
    });
  }
}

export default WatchNotifierPlugin;

import path from "node:path";

class TemplateWatchPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap("TemplateWatchPlugin", (compilation) => {
      const templatePath = path.resolve(__dirname, "my-template.html");

      // webpack이 이 파일을 감시하도록 설정하세요
      compilation.fileDependencies.add(templatePath);

      // 디렉토리 감시(컨텍스트 종속성)
      const templatesDir = path.resolve(__dirname, "templates");
      compilation.contextDependencies.add(templatesDir);

      // 예시: 누락된 종속성을 표시합니다.
      const missingFile = path.resolve(__dirname, "missing-file.txt");
      compilation.missingDependencies.add(missingFile);
    });
  }
}

export default TemplateWatchPlugin;

this.hooks = {
  shouldEmit: new SyncBailHook(["compilation"]),
};

class AssetLoggerPlugin {
  apply(compiler) {
    compiler.hooks.thisCompilation.tap("AssetLoggerPlugin", (compilation) => {
      const logger = compilation.getLogger("AssetLoggerPlugin");
      compilation.hooks.processAssets.tap(
        {
          name: "AssetLoggerPlugin",
          stage: compilation.constructor.PROCESS_ASSETS_STAGE_SUMMARIZE,
        },
        (assets) => {
          logger.info("Generated assets:");
          for (const assetName of Object.keys(assets)) {
            logger.info(assetName);
          }
        },
      );
    });
  }
}

export default AssetLoggerPlugin;

Generated assets:
main.js
vendor.js
styles.css