webpackおなじみの、バージョンアップのオプション変更でエラーが出ました。
『removeComments, collapseWhitespaceなんか知らん!』と出たのですが、答えは『指定する場所が変わった。』です。
変更前 | 0.5.5 |
変更後 | 1.1.0 |
webpack | 4.43.0 |
webpack-cli | 3.3.11 |
html-loaderのバージョンアップは2年ぶりくらいです。メジャー番号が変わったのでオプション変更くらいは起きるでしょう。
webpack5の安定版がそろそろ出るかなと思ったので、ここで一気にプラグイン・パッケージのバージョンアップを行いました。
そこで出たのが毎度おなじみの『そんなオプションは知らん!』エラーです。
変更前の設定です。
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の中に入ったようです。変更後の設定です。
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",
},
],
},
};
これが無難です。よほどしなければならない設定がないかぎり。