webpack | ただ屋ぁのブログ

webpack

webpackは、HTML, CSS(SASSなど), JavaScriptで作るWebサイト環境のビルドツールです。

元々は、1つのJavaScriptファイルにHTML, CSS, 画像などのリソースを全部入れて、Webサイトのリソースを1つのHTML(index.html)と1つのJavaScriptファイルだけにするものでした。

しかし今は、JavaScriptを対象のバージョンに変換するトランスパイル、SASSなどの高機能CSS作成言語のCSS変換など、Webサイト開発環境の総合ビルドツールになっています。

このようなツールはWeb開発の必須といっていいでしょう。そんなwebpackで困った人のために情報を発信します。

webpack5, 環境移行はNode.jsのバージョンに気をつけよう！

webpackを使った環境は、package.json, package-lock.jsonファイルさえあれば、コマンド一発で他PCでもまったく同じ環境が作れます。

ただエラーが出たときはツラい。原因はNode.jsのバージョン違いだったんですが、そのエラーはバージョン違いが想像できない内容になることがあるから。

webpackのプラグインsass-loaderは、同じくwebpackのプラグインnode-sassの拡張プラグインです。

当然ですが、node-sassに大きく影響される。

node-sassのバージョンを上げるとsass-loaderのインストールに失敗することがあります。

webpackのプラグインnode-sassは、Node.jsのバージョンに大きく影響されます。

node-sassのバージョンとNode.jsのバージョンは対応表があるほど。

でも、エラー内容からはそれが想像できません。これを解決するのに2時間かかった。

CSSのminimize（圧縮）で、font-familyのダブルクォーテーション（"）を削除すると、"invalid property value" が出てしまうことがあります。

そこでwebpack5の設定を変えます。

（webpack4でも同じのはず。）

CSSの圧縮では極限まで小さくすると、font-familyのダブルクォーテーション（"）を削除します。

これがAMPではエラーになります。以前はそんなことなかったんですが仕様が変わったらしい。

webpackを4から5へアップデートしましたが、移行ガイドを読まずに自力でできてしまったので、改めて移行ガイドを読んでみます。

抜けがないか確認のため。設定の細かいカスタマイズをしてる人は一読する価値あり。基本設定で済ませていれば、そこまで必要はなかったかな？

1 / 3