webpack4, プラグインのバージョンアップでエラー三昧

webpackおなじみの、プラグインのバージョンアップでのエラー対応です。

出るわ出るわのエラー三昧で笑けてきた。

（三昧はスシだけでいい。）

ビルドツールはあまり更新をしないから出るからしょうがないんだけど、webpack5に移行するためには一旦バージョン4で最新にする必要がある。

お久しぶ～り～ねー。アナタに会うなんて～。

薄い記憶の彼方にある昭和の歌謡曲が流れてます。

（意味はあとで分かる。）

webpackのプラグイン・バージョンアップって、みんなはどれくらいの間隔でやってるんだろう？

ボクはあまりしません。だって、使ってたオプションとか消えるんだもん。

ビルド環境を作るのに時間がかかるのは本末転倒でしょう？ その時間をアプリ開発に注ぎたい。

Next.jsなどのフレームワークに至っては絶対に触りません。組み込まれたwebpackプラグインをずっと使ってます。

今回は、webpackのバージョン5がそろそろ安定版が出るかな？と思って、その準備のため、2年ぶりくらいにプラグイン全部を最新にしました。

そしたら出るわ出るわのオンパレード。もちろんエラーの。

ということでボクがエラーを出したプラグインの全リストです。

sass-loader

今、生のCSSファイルを書くことあるんだろうか？

それくらいLessとかSassを使うのが当たり前です。そのSass用のローダーです。

これを通すと、cssに変換してcss-loaderに結果を渡すことでjsにバンドルします。

css-loader

名前の通り、cssをjsにバンドルするローダーです。定番ですね？

これでもエラーが出ました。

postcss-loader

これも定番です。postcssはcssをビルドする有名なパッケージで、webpack以外でも使えるツールです。

postcss-loaderはそのwebpack版のようなもの。

使い方はどのツールでも同じなので、ほかのものからwebpackに移行するときにインストールします。

また、もともとcssをビルドするのに特化したツールなので、高機能で細かい設定をするときに使うのも定番。

ボクは細かい設定ができるので重宝しています。

CopyWebpackPlugin

srcにあるファイルをdistにコピーしたいときに使うプラグインです。

xml, jsonファイルや画像など、そのままサーバーへアップロードするファイルなどで使います。

（かんたんなHTMLやCSSなどで使うこともある。）

これを使わず、distに置いておくという手もある。ボクはphpファイルをそうしている。

html-loader

これも定番です。htmlファイルのローダーです。

html-webpack-exclude-assets-plugin

webpackのデフォルトでは、HTMLやCSSはindex.html以外、jsファイルにバンドルします。そんなとき、htmlファイルをそのまま出力する（圧縮とかはできる）、html-webpack-pluginを使っているでしょう。

その拡張プラグインhtml-webpack-exclude-assets-pluginは使えなくなりました。

（HTMLに入れるjs, cssを除外するもの。）

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

アップデート作業では、オプション変更やそもそも使えなくなるプラグインが出てくるのは覚悟しないといけないです。

あまりアップデートしないときはとくに。

ただ、ここまで出てくるのは想定してなかった。

番外編 IE11のトランスパイルとポリフィル

ついでにIE11のトランスパイルとポリフィルについて。結局ボクはIE11を捨てました。

一応、設定まではできてます。