LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

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

Node.js image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

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

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

変更前3.2.0
変更後4.3.0
html-webpack-pluginのバージョン
webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

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
npm i -D html-webpack-skip-assets-plugin
yarn
yarn add html-webpack-skip-assets-plugin --dev

動作確認

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

webpack.config.js
// 使えない
//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をわざわざ用意したようですね。

前のページ
webpack4, html-loaderのバージョンアップでエラー
webpack4, @babel, IE11でforEachがエラー
次のページ

JavaScriptの本

post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください