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, CSSの圧縮でfont-familyのダブルクォーテーション（"）を消さない方法

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

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

（webpack4でも同じのはず。）

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

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

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

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

webpackを4から5へアップデートしました。エラーはちょいちょい出ていて、うまく行ってるところ、そうじゃないところがあります。

ひとつひとつ見ていきましょう。

これは移行作業の序の口です。その後にプラグインのアップデート、エラーが出たらその修正が必要です。

webpackプラグインでは恒例の、バージョンアップのオプション変更でエラーが出ました。

postcss-loaderを3.x系から4.x系に変更すると『pluginsなんか知らん！』と出ます。

どうやらオプションの指定する場所が変わったらしい。

@babelでトランスパイルしているのにIE11でNodeList.forEach()が使えない。

なんで？ ...そうか、ポリフィルが必要だった。

ポリフィルはブラウザの種類やバージョンによって追加されたり変更・削除されたコードを補完するものです。

1 / 2