Webpack4プラグインの実装原理についての簡単な説明

// コンパイラを作成する createChildCompiler(
  コンパイル、
  コンパイラ名、
  コンパイラインデックス、
  出力オプション、
  plugins // プラグインを含む) {

   // 新しいコンパイラ const childCompiler = new Compiler(this.context);
  // 既存のプラグインをすべて検索 if (Array.isArray(plugins)) {
    for (const plugin of plugins) {
       // 存在する場合は、プラグインの適用メソッドを呼び出します。plugin.apply(childCompiler);
    }
  }
  
  // プラグインに対応するフックをトラバースして見つける
  for (const name in this.hooks) {
    もし （
      ![
        "作る"、
        "コンパイル"、
        「放出」、
        「afterEmit」、
        "無効"、
        "終わり"、
        「このコンピレーション」
      ].includes(名前)
    ）{
    
      // 対応するフックを見つけて呼び出します。 
      if (childCompiler.hooks[名前]) {
        childCompiler.hooks[名前].taps = this.hooks[名前].taps.slice();
      }
    }
  }
 
 // .... 省略....

  子コンパイラを返します。
}

// 上記の Compiler クラスは Tapable クラスを継承しており、Tapable はこれらのフック イベント フローを定義します。class Compiler extends Tapable {
 コンストラクタ(コンテキスト) {
            素晴らしい（）;
            this.hooks = {
                    /** @type {SyncBailHook<コンパイル>} */
                    shouldEmit: 新しいSyncBailHook(["コンパイル"])、
                    /** @type {AsyncSeriesHook<Stats>} */
                    完了: 新しい AsyncSeriesHook(["stats"])、
                    /** @type {AsyncSeriesHook<>} */
                    追加パス: 新しいAsyncSeriesHook([])、
                    /** @type {AsyncSeriesHook<Compiler>} */
                    beforeRun: 新しいAsyncSeriesHook(["compiler"])、
                    /** @type {AsyncSeriesHook<Compiler>} */
                    実行: 新しい AsyncSeriesHook(["compiler"]),
                    /** @type {AsyncSeriesHook<コンパイル>} */
                    出力: 新しい AsyncSeriesHook(["コンパイル"]),
                    /** @type {AsyncSeriesHook<文字列、バッファ>} */
                    アセットが発行されました: 新しい AsyncSeriesHook(["file", "content"]),
                    /** @type {AsyncSeriesHook<コンパイル>} */
                    afterEmit: 新しいAsyncSeriesHook(["コンパイル"])、

                    /** @type {SyncHook<Compilation, CompilationParams>} */
                    thisCompilation: 新しいSyncHook(["compilation", "params"]),
                    /** @type {SyncHook<Compilation, CompilationParams>} */
                    コンパイル: 新しい SyncHook(["コンパイル", "パラメータ"]),
                    /** @type {SyncHook<NormalModuleFactory>} */
                    normalModuleFactory: 新しいSyncHook(["normalModuleFactory"])、
                    /** @type {SyncHook<ContextModuleFactory>} */
                    contextModuleFactory: 新しいSyncHook(["contextModulefactory"])、

                    /** @type {AsyncSeriesHook<CompilationParams>} */
                    コンパイル前: 新しい AsyncSeriesHook(["params"])、
                    /** @type {SyncHook<CompilationParams>} */
                    コンパイル: 新しいSyncHook(["params"])、
                    /** @type {AsyncParallelHook<コンパイル>} */
                    作成: 新しい AsyncParallelHook(["コンパイル"])、
                    /** @type {AsyncSeriesHook<コンパイル>} */
                    afterCompile: 新しいAsyncSeriesHook(["コンパイル"])、

                    /** @type {AsyncSeriesHook<Compiler>} */
                    watchRun: 新しいAsyncSeriesHook(["compiler"])、
                    /** @type {SyncHook<Error>} */
                    失敗: 新しいSyncHook(["error"])、
                    /** @type {SyncHook<文字列, 文字列>} */
                    無効: 新しいSyncHook(["filename", "changeTime"]),
                    /** @type {SyncHook} */
                    watchClose: 新しいSyncHook([])、

                    /** @type {SyncBailHook<string, string, any[]>} */
                    インフラストラクチャログ: 新しい SyncBailHook(["origin", "type", "args"])、

                    // TODO 次のフックは奇妙な場所にここにあります
                    // TODO webpack 5 用に移動します
                    /** @type {SyncHook} */
                    環境: 新しいSyncHook([])、
                    /** @type {SyncHook} */
                    afterEnvironment: 新しいSyncHook([])、
                    /** @type {SyncHook<コンパイラ>} */
                    afterPlugins: 新しいSyncHook(["compiler"])、
                    /** @type {SyncHook<コンパイラ>} */
                    afterResolvers: 新しいSyncHook(["compiler"])、
                    /** @type {SyncBailHook<文字列, エントリ>} */
                    エントリオプション: 新しい SyncBailHook(["context", "entry"])
            };
            
            // TODO webpack 5 これを削除する
            this.hooks.infrastructurelog = this.hooks.infrastructureLog;
               
            // 対応するコンパイラをタブで呼び出し、コールバック関数を渡します this._pluginCompat.tap("Compiler", options => {
                    スイッチ (オプション.名前) {
                            ケース「追加パス」:
                            「実行前」の場合:
                            ケース「実行」:
                            ケース「emit」:
                            「アフターエミット」の場合:
                            「コンパイル前」の場合:
                            ケース「make」:
                            「コンパイル後」の場合:
                            ケース「watch-run」:
                                    オプション。
                                    壊す;
                    }
            });
            // 以下省略......
  }

// プラグインクラスを定義する class MyPlugins {
    // 前述のように、新しいコンパイラインスタンスが作成され、そのインスタンスのapplyメソッドが実行され、対応するコンパイラインスタンスが渡されます。apply (compiler) {
        // 新しいコンパイラインスタンスの下でフックイベントフローを呼び出し、タブを通じてそれをトリガーし、コールバック関数を受け取ります。compiler.hooks.done.tap('通常はプラグインのニックネーム'、(デフォルトの受信パラメータ) => {
            console.log('実行本体を入力してください');
        })
    }
}
// エクスポートモジュール.exports = MyPlugins

path = require('path') とします。
DonePlugin = require('./plugins/DonePlugins') とします。
AsyncPlugins = require('./plugins/AsyncPlugins') とします。

モジュール.エクスポート = {
    モード: '開発'、
    エントリ: './src/index.js',
    出力: {
        ファイル名: 'build.js',
        パス: path.resolve(__dirname, 'dist')
    },
    プラグイン: [
        new DonePlugin(), // 内部同期フック
        new AsyncPlugins() // 内部非同期フック
    ]
}

クラス DonePlugins {
    適用（コンパイラ）{
        コンパイラーフックの完了.tap('DonePlugin', (統計) => {
            console.log('実行: コンパイルが完了しました');
        })
    }
}

module.exports = 完了プラグイン

クラスAsyncPlugins {
    適用（コンパイラ）{
        コンパイラーフックのemit.tapAsync('AsyncPlugin', (complete, callback) => {
            タイムアウトを設定する(() => {
                console.log('実行: ファイルが出力されました');
                折り返し電話（）
            }, 1000)
        })
    }
}

module.exports = 非同期プラグイン

クラスFileListPlugin {
    // 初期化、ファイル名を取得するコンストラクタ ({filename}) {
        this.filename = ファイル名
    }
    // 同じテンプレート形式で、apply メソッドを定義します。apply (compiler) {
        コンパイラー.フック.emit.tap('FileListPlugin', (コンパイル) => {
            // アセットは静的リソースであり、コンパイルパラメータを出力でき、多くのメソッドとプロパティがあります。let アセット = compilation.assets;
            
            // 出力ドキュメント構造を定義します let content = `## ファイル名 リソース サイズ\r\n`
            
            // 静的リソースを走査し、出力コンテンツを動的に結合します Object.entries(assets).forEach(([filename, stateObj]) => {
                コンテンツ += `- ${filename} ${stateObj.size()}\r\n`
            })
            
            // 出力リソースオブジェクトassets[this.filename] = {
                ソース （） {
                    コンテンツを返します。
                },
                サイズ （） {
                    コンテンツの長さを返す
                }
            }
            
        })
    }
}
// エクスポート module.exports = FileListPlugin

path = require('path') とします。
HtmlWebpackPlugin = require('html-webpack-plugin') を設定します。
// プラグインディレクトリは、node_modules、カスタムプラグインと同じレベルにあり、ローダーに似ています。let FileListPlugin = require('./plugins/FileListPlugin')

モジュール.エクスポート = {
    モード: '開発'、
    エントリ: './src/index.js',
    出力: {
        ファイル名: 'build.js',
        パス: path.resolve(__dirname, 'dist')
    },
    プラグイン: [
        新しいHtmlWebpackプラグイン({
            テンプレート: './src/index.html',
            ファイル名: 'index.html'
        }）、
        新しいファイルリストプラグイン({
            ファイル名: 'list.md'
        })
    ]
}