備忘録β版

自作の license-info-webpack-plugin を webpack v4 に対応させました。

手順

webpack v4 対応する上でそのままでは動かないことは容易に予想できていたので、以下の順で段階的に対応を進めました。

plugin や loader における対応は、以下のページにまとまっています。

一番大きな変更点は

// webpack v3
compiler.plugin("compilation", compilation => {
  // ...
})

が

// webpack v4
compiler.hooks.compilation.tap({ name: "plugin-name" }, compilation => {
  // ...
})

になったことです。

従来の compiler.plugin() の第一引数に指定していた文字列が compiler.hooks のプロパティになっています。このプロパティは、従来の kebab-case を camelCase にすることで対応できます。

また tap 以外に tapAsync , tapPromise でプラグイン処理を挟み込む事ができます。

v3, v4 両対応するには、分岐するのが一番シンプルなので

if (compiler.hooks) {
  // webpack v4
} else {
  // webpack v3
}

というような処理になるかと思います。

自分のプラグインはさほど大きな対応をする必要は無かったのですが、Chunk graph や ChunkGroups あたりに大きな変更が入っているので、この辺りを触っているプラグインは大変そうな予感がしています。

webpack v4 対応にあたって uglifyjs-webpack-plugin や webpack/webpack リポジトリ内にあるプラグインの変更履歴を参考にしました。