webpack4, html-webpack-exclude-assets-pluginは使えない話。

html-webpack-pluginのバージョン4.0.0から、拡張プラグインhtml-webpack-exclude-assets-pluginは使えません。

代替プラグインを使います。

webpack5の安定版がそろそろ出るかなと思ったので、ここで一気にプラグイン・パッケージのバージョンアップを行いました。

すると、開発が止まってて使えないものがある。

html-webpack-pluginの拡張プラグイン・html-webpack-exclude-assets-pluginです。

html-webpack-pluginってなんぞや？

html-webpack-pluginは、ソースディレクトリ（大概はsrc）にあるhtmlファイルをビルド結果ディレクトリ（デフォルトdist）に出力するものです。

webpackはプラグインを何も入れないと、CSS, 画像などのリソースを JavaScriptファイルに突っ込みます。

HTMLも同じです。

（もちろんjsでimportが必要。）

webpackがdistに出力するHTMLファイルは1つで、リソースをツッコんだJavaScriptファイルをロードするためのindex.htmlだけです。

SPA（Single Page Application）を意識しているようですが、そうでない普通のWebサイトではそうは行きません。

そこで使われるプラグインがhtml-webpack-pluginです。

html-webpack-pluginが出力するHTMLには、プロジェクトで作成されているすべてのjsファイルが自動で<script>に追加され、すべてのcssファイルが<link>に追加されます。

html-webpack-exclude-assets-pluginってなんぞや？

html-webpack-pluginはビルド元HTMLファイルと出力先を指定する以外できることがなく、最低限の機能しかありません。

そこでたくさんの拡張プラグインが用意されています。

html-webpack-exclude-assets-pluginは、html-webpack-pluginで出力するHTMLに追加するjs, cssファイルの除外設定をするものです。

自動的にぜんぶブッ込まれるのは、ありがた迷惑なんですね？ 親切なんですが。

開発は2年前（2018）で止まっている

html-webpack-pluginを使うとき、結構使うことになるhtml-webpack-exclude-assets-pluginですが、開発が止まっています。

html-webpack-pluginのバージョン4以降は動きません。こんなエラーが出ます。

***\***\node_modules\html-webpack-exclude-assets-plugin\index.js:25
      throw new Error('The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and' +
      ^

Error: The expected HtmlWebpackPlugin hook was not found! Ensure HtmlWebpackPlugin is installed and was initialized before this plugin.
    at HtmlWebpackExcludeAssetsPlugin.applyCompilation (***\***\node_modules\html-webpack-exclude-assets-plugin\index.js:25:13)
    at SyncHook.eval [as call] (eval at create (***\***\node_modules\tapable\lib\HookCodeFactory.js:19:10), <anonymous>:7:1)

以下省略。

GitHubのissuesでは代替プラグインを使おうと言ってます。バージョンアップの気配がないのであきらめろと。

html-webpack-skip-assets-pluginを使う

そこで代わりのプラグインですが、すぐに見つかりました。親プラグインのドキュメントに書いてあります。

html-webpack-skip-assets-plugin

Skip adding certain output files to the html file. Built as a drop-in replacement for html-webpack-exclude-assets-plugin and works with newer html-webpack-plugin versions

（特定の出力ファイルを html ファイルに追加するのをスキップします。html-webpack-exclude-assets-plugin の代替として構築され、より新しい html-webpack-plugin のバージョンで動作します。）

筆者訳

インストール

インストールはいつものとおりです。

npm i -D html-webpack-skip-assets-plugin

yarn add html-webpack-skip-assets-plugin --dev

動作確認

動作確認をします。設定方法は変えず使うプラグインだけを変更します。

// 使えない
//const HtmlWebpackExcludeAssetsPlugin = require("html-webpack-exclude-assets-plugin");
const HtmlWebpackSkipAssetsPlugin = require("html-webpack-skip-assets-plugin")
  .HtmlWebpackSkipAssetsPlugin;

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      filename: "/sample/index.html",
      template: "./src/sample/index.html",
      minify: true,
      // css, jsのhtml差し込み除外
      excludeAssets: ["**/sample2.js", "**/sample2.css"],
    });
    // プラグイン交代
    //new HtmlWebpackExcludeAssetsPlugin()
    new HtmlWebpackSkipAssetsPlugin()
  ],
  // ほか省略。
};

excludeAssetsプロパティが使えて設定を変えなくていいので、これが一番の代替手段でしょう。

このプラグインの本当のオプションはskipAssetsですが、プラグインの移行のことを考えてexcludeAssetsをわざわざ用意したようですね。