كتابة Plugin

// صنف JavaScript.
class MyExampleWebpackPlugin {
  // عرّف `apply` كدالة على prototype، وتستقبل compiler كـ argument
  apply(compiler) {
    // الدخول إلى compilation
    compiler.hooks.thisCompilation.tap(
      "MyExampleWebpackPlugin",
      (compilation) => {
        // تحديد hook الخاص بمعالجة assets
        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) {
    // يعمل هذا hook عندما تكتمل عملية build بالكامل
    compiler.hooks.done.tap(
      "Hello World Plugin",
      (stats /* يتم تمرير stats كـ argument عند استخدام done hook.  */) => {
        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";

// schema لكائن options
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) {
    // الدخول إلى compilation hook الذي يمرر compilation كـ argument إلى callback
    compiler.hooks.compilation.tap("HelloCompilationPlugin", (compilation) => {
      // الآن يمكننا الدخول إلى hooks المتاحة عبر 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) => {
        // نفّذ عملًا غير متزامن...
        setTimeout(() => {
          console.log("Done with async work...");
          callback();
        }, 1000);
      },
    );
  }
}

export default HelloAsyncPlugin;

class HelloAsyncPlugin {
  apply(compiler) {
    compiler.hooks.emit.tapPromise(
      "HelloAsyncPlugin",
      (compilation) =>
        // أرجع Promise تُحل عندما ننتهي...
        new Promise((resolve, reject) => {
          setTimeout(() => {
            console.log("Done with async work...");
            resolve();
          }, 1000);
        }),
    );
  }
}

export default HelloAsyncPlugin;

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

  // يجب تمرير أي options عبر constructor الخاص بالـ plugin،
  // فهذا جزء من public API للـ plugin.
  constructor(options = {}) {
    // تطبيق options التي حددها المستخدم فوق options الافتراضية،
    // وإتاحة options المدمجة لاحقًا لدوال plugin.
    // غالبًا يجب أن تتحقق من كل options هنا أيضًا.
    this.options = { ...FileListPlugin.defaultOptions, ...options };
  }

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

    // يمكن الوصول إلى instance الخاصة بـ webpack module من كائن compiler،
    // وهذا يضمن استخدام الإصدار الصحيح من module
    // لا تستخدم require/import لـ webpack أو أي رموز منه مباشرة.
    const { webpack } = compiler;

    // يعطينا كائن Compilation reference إلى ثوابت مفيدة.
    const { Compilation } = webpack;

    // RawSource أحد أصناف "sources" التي يجب استخدامها
    // لتمثيل مصادر assets داخل compilation.
    const { RawSource } = webpack.sources;

    // الدخول إلى hook "thisCompilation" حتى ندخل لاحقًا
    // إلى عملية compilation في مرحلة مبكرة.
    compiler.hooks.thisCompilation.tap(pluginName, (compilation) => {
      // الدخول إلى مسار معالجة assets في مرحلة محددة.
      compilation.hooks.processAssets.tap(
        {
          name: pluginName,

          // استخدام مرحلة متأخرة من مراحل معالجة assets للتأكد
          // من أن كل assets أُضيفت بالفعل إلى compilation بواسطة plugins أخرى.
          stage: Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,
        },
        (assets) => {
          // "assets" هو object يحتوي على كل assets
          // داخل compilation. مفاتيح object هي مسارات assets
          // والقيم هي مصادر الملفات.

          // المرور على كل assets
          // وتوليد محتوى ملف Markdown.
          const content = `# In this build:\n\n${Object.keys(assets)
            .map((filename) => `- ${filename}`)
            .join("\n")}`;

          // إضافة asset جديد إلى compilation، حتى يولده webpack
          // تلقائيًا داخل مجلد output.
          compilation.emitAsset(
            this.options.outputFile,
            new RawSource(content),
          );
        },
      );
    });
  }
}

export default FileListPlugin;

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

// استخدم plugin داخل إعدادات webpack:
export default {
  // …

  plugins: [
    // إضافة plugin بالخيارات الافتراضية
    new FileListPlugin(),

    // أو:

    // يمكنك تمرير أي options مدعومة:
    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);

      // راقب مجلدًا كاملًا context dependency
      const templatesDir = path.resolve(__dirname, "templates");
      compilation.contextDependencies.add(templatesDir);

      // مثال: علّم dependency مفقودًا
      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