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

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

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

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

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

(三昧はスシだけでいい。)

webpack4.43.0
webpack-cli3.3.11
webpackのバージョン

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

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

(意味はあとで分かる。)

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にコピーしたいときに使うプラグインです。

html-loader

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

html-webpack-exclude-assets-plugin

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

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

(HTMLに入れるjs, cssを除外するもの。)

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


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

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

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

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

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

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

コメントを残す

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