webpack pluginの作り方メモ

2018-01-24 #javascript  #webpack 

これの自分用メモ。実際に作るときはwebpack4との互換性を考えること。 https://webpack.js.org/contribute/writing-a-plugin/

CompilerとCompilation

compiler

  • loaderやpluginを含めすべてのwebpackの設定情報を持っている
  • pluginにはこのcompilerへの参照が渡される – つまりcompilerを通じてwebpackの設定を知れ

compilation

  • 個々のwebpackビルドを表現するオブジェクト
  • ビルドに関する情報を持っている – モジュールの状態 – コンパイルされたアセット – 変更のあったファイル – ウォッチしている依存ファイル
  • ビルドの各ポイントでcallbackを実行する – pluginが任意の処理を差し込むことができる

基本構造

compilerにアクセスする

compilerはpluginのapplyメソッドを通じて提供される。 compiler.plugin('done', func)'done'はイベント名。 イベント一覧はここにある。
https://webpack.js.org/api/compiler/#event-hooks

function HelloWorldPlugin(options) {
  // pluginのconstructor
}

HelloWorldPlugin.prototype.apply = function(compiler) {
  compiler.plugin('done', function() {
    // ...
  });
};

module.exports = HelloWorldPlugin;

compilationにアクセスする

compilationオブジェクトはcompiler.pluginメソッドのcallback引数として提供される。 ‘optimize’はcompilationのイベント名。 一覧はここにある。
https://webpack.js.org/api/compilation/

compiler.plugin("compilation", function(compilation) {
  compilation.plugin("optimize", function() {
    // ...
  });
});

pluginのタイプ

pluginはそれが作用するイベントによって分類される。 らしいが実際のコードでどう使うかよくわからないので飛ばす。
https://webpack.js.org/contribute/writing-a-plugin/#different-plugin-shapes

Tapableクラス

webpackの多くのオブジェクトはTapableクラスを継承して作られたもの。 Tapableによってオブジェクトはpluginメソッドを持ち、各種イベントフックに作用することができる。

ただ、webpack4のα版を試すとpluginメソッドはdeprecatedとのことなので実装時はここらへん気をつけたほうがよさそう。

DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead