ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

webpack4, html-loaderのバージョンアップでエラー

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

webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。

『removeComments, collapseWhitespaceなんか知らん!』と出たのですが、答えは『指定する場所が変わった。』です。

変更前0.5.5
変更後1.1.0
html-loaderのバージョン
webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

html-loaderのバージョンアップは2年ぶりくらいです。メジャー番号が変わったのでオプション変更くらいは起きるでしょう。

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

そこで出たのが毎度おなじみの『そんなオプションは知らん!』エラーです。

変更前の設定です。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          minimize: true,
          removeComments: true,
          collapseWhitespace: true,
        },
      },
    ],
  },
};

// rules以外は省略。

するとこんなエラーが。

ERROR in ./src/test/main.html
Module build failed (from ./node_modules/html-loader/dist/cjs.js):
ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'collapseWhitespace'. These properties are valid:
   object { preprocessor?, attributes?, minimize?, esModule? }
    at validate (***\***\node_modules\schema-utils\dist\validate.js:96:11)
    at Object.htmlLoader (***\***\node_modules\html-loader\dist\index.js:22:28)

collapseWhitespaceプロパティは知らん。

removeCommentsも同じエラーが出ます。

どうやらオプション設定方法が変わったらしい。ドキュメントを確認してみた。

やっぱり変わってますね。これらのプロパティは、minimizeの中に入ったようです。変更後の設定です。

webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          minimize: true,
        },
      },
    ],
  },
};

minimizeがtrueのとき、明示的に指定しなければcollapseWhitespace, removeCommentsもtrueになります。

一応、minifyするのに半角スペース・コメントを残す場合は、

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader",
        options: {
          minimize: {
            removeComments: false,
            collapseWhitespace: false,
          },
        },
      },
    ],
  },
};

こういうことするかな?

デフォルトでいいと思います。ちなみに、minimizeのデフォルトはtrueなのでこの設定でもOK。

module.exports = {
  module: {
    rules: [
      {
        test: /\.html$/,
        loader: "html-loader",
      },
    ],
  },
};

これが無難です。よほどしなければならない設定がないかぎり。

前のページ
webpack4, CopyWebpackPluginのバージョンアップでエラー
webpack4, html-webpack-exclude-assets-pluginは使えない話。
次のページ

JavaScriptの本

post-cta-image

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

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

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


javaScriptの本5選

コメントを残す

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