泰延webpackCSSSass13194151ウェブのフロントエンドエンジニア開発で人気を集めるモジュールバンドラーのwebpack(ウェブパック)。webpackにはJavaScriptファイルのバンドルだけではなく、スタイルシート(CSSやSass)のバンドルもできます。4入門」では、webpackの基本的な使い方を解説しましたが、この記事ではスタイルシートに焦点をあてて解説します。※webpackを利用するには事前にNode.jsをインストールしておいてください。4.1をもとに解説しています。容量の閾値で画像のバンドルを制御する方法PostCSS(Autoprefixer)のバンドル方法CSSをバンドルする利点webpackでは、JavaScriptだけではなくスタイルシート、画像、ウェブフォント等あらゆるリソースをモジュールとして取り扱えます。JavaScriptファイル以外のファイルを扱うには、webpackのLoader機能を用います。さまざまなファイルをバンドルする利点は読み込みの高速化が挙げられます。HTTP/1.1接続ではブラウザとウェブサーバーの同時接続数が限られるため、複数のファイルの転送に時間がかかります。複数のJSファイルを1つにまとめてしまうことが一般的な解決案として知られています。4を利用して制作したウェブサイト「CreateJS入門サイト」を紹介します。スタイルシートで画像もバンドルしているため、リクエスト数が少なくなりページの表示高速に役立ちました。ブラウザキャッシュのない状態でも300ミリ秒をきるほど高速に読み込みできています。webpack+CSSの構成を作成しようCSSファイルの読み込み例を紹介します。サンプルは次のリンクにあるので、手順がわからなければ参照ください。-y」を打ち込んだ状態から解説をはじめます。Loaderなので、この2つのプラグインをプロジェクトフォルダーにインストールします。コマンドラインで次のコマンドを入力ください。css-loader設定ファイル続いて、webpack.config.jsファイルに次の設定を追記します。本来は細かいオプションを設定できますが、最低限の内容としては次のコードとなります。CSSのバンドルには「style-loader」と「css-loader」の二種類が必要だと覚えてください。}};拡張子が.cssのファイルに対して、use配列で指定したLoaderが後ろから順番に適用されます。処理を図示すると次のような流れになります。css内のurl()メソッドや@import文をJavaScriptのrequire()メソッドに変換。file-loaderやurl-loaderと組み合わせて依存解決しますとりあえずwebpackを動かすために最小限の構成で説明しています。現場で使えるwebpack.config.jsファイルの書き方は後述します。コンテンツ側のソースコードsrcフォルダー内にindex.jsとstyle.cssの2つのファイルを格納します。index.jsファイルにはimport文を用いて、CSSファイルを読み込むように記述します。文を使ってstyle.cssファイルを読み込む。webpackコマンドを使ってビルドすると、ビルドされたdist/main.jsの中にCSSコードが埋め込まれます。webpack▲ビルドコマンドによってmain.jsファイルにバンドルされるHTML側でdist/main.jsファイルを読み込むと、スタイルが適用されます。JSファイルしか読み込んでいない状態ですが、main.jsファイルには自動的にCSSに展開される機能が入っているためです。▲ビルドコマンドによってmain.jsファイルにバンドルされる実戦向きのwebpack.config.jsファイル制作の現場ではソースマップの出力は必須です。ソースマップとは変換前のコードの情報を残すことで開発時に役立てることができる機能です。変換前後ではコードの形が大きく変わってしまうため、元のコードの何行目が影響しているのかわかりやすくする効果があります。webpack.config.jsファイルのコードが長くなりますが、慣れてきたら次のような設定をするといいでしょう。webpackの仕様として、mode値がdevelopmentであってもCSSのソースマップは自動的に有効にはなりません。逆に、mode値がproductionであってもCSSのソースマップは自動的に無効にはなりません。そのため、ソースマップの有効無効は自前の変数で管理しています。webpack+Sassの構成を作成しようフロントエンド開発では、Sassなどの中間言語を使うことが多いでしょう。webpackではこれらの中間言語を変換できます。アンケートをしてみたところ、多くのCSSコーダーはSassを利用していることがわかりました。SassのSCSSファイルを読み込む手順を解説します。サンプルは次のリンクにあるので、手順がわからなければ参照ください。webpack+Sassのサンプル▲これから説明するサンプル。ビルドコマンドによってmain.jsファイルにバンドルするモジュールのインストールSassの読み込みに必要なローダーは、sass-loaderです。LoaderはSassのコンパイル用モジュールnode-sassに依存しているので、あわせてインストールします。コマンドラインで次のコマンドを入力します。css-loader設定ファイル続いて、webpack.config.jsファイルに次の設定を追記します。}};拡張子が.scssのファイルに対して、use配列で指定したLoaderが後ろから順番に適用されます。処理を図示すると次のような流れになります。コンテンツ側のソースコードローダーを用いてSassを読み込むには、エントリーポイント内でimport文を用いて次のように記述します。srcフォルダー内にindex.jsファイルとstyle.cssファイルを格納しているとして解説します。import文を使ってSassファイルを読み込む。"./style.scss";ビルドwebpackコマンドを使ってビルドすると、webpackはSassをコンパイルします。webpack▲ビルドコマンドによってmain.jsファイルにバンドルされる。このサンプルでは、画像は取り込んでいないのがポイント。Sass内の画像もバンドルする方法webpackでは画像もJSファイルにバンドルできます。画像はBase64文字列として変換され、コンパイル後のJSファイルに含まれます。何でもかんでもJSファイルにするのは違和感があるかもしれませんが、HTTP/1.1環境下でリクエスト数を極限まで下げるには1つの最適解だと思います。サンプルは次のリンクにあるので、手順がわからなければ参照ください。Sassで画像を取り込むサンプル▲これから説明するサンプル。ビルドコマンドによってmain.jsファイルにバンドルするモジュールのインストール基本的には先述のSassの手順と同じですが、url-loaderモジュールを追加でインストールします。url-loader設定ファイルその上で、webpackの設定ファイルには次のように指定します。JPGやPNGなどの画像形式の場合にurl-loaderが適用されるように指定しています。}};拡張子が.scssのなかでURL参照をしている画像ファイルがあれば、url-loaderが適用されます。処理を図示すると次のような流れになります。エントリーポイントのsrc/index.jsの内容は前述のSassのサンプルと同じです。ビルドwebpackコマンドを使ってビルドすると、webpackはSassをコンパイルします。すると、画像も取り込まれてdist/main.jsファイルが生成されます。webpack▲ビルドコマンドによってmain.jsファイルにバンドルされる。このサンプルでは、画像も取り込んでいるのがポイント。画像をバンドルしない場合/一部だけバンドルする場合CSSの場合、画像の取り扱いがポイントです。url-loaderだと一括ですべてのファイルを埋め込みますが、逆に画像を埋め込みたくないという方もいるでしょう。そのやり方を「file-loaderのサンプル」にまとめてますので参照ください。file-loaderを使うのがポイントです。高度なテクニックとして、一定のサイズまでは画像をバンドルして、閾値を超えた場合は埋め込まず外部参照にするといった柔軟な設定もできます。2本来のファイル容量に比べてBase64化することで1.33倍に大きくなるといったデメリットがあります。サーバーリクエスト処理のコストに比べて12のほうが小さい場合もあります。容量の大小で制御するのは1つの現実解でしょう。その設定方法は「url-loaderでlimitを設定したサンプル」にまとめたので参照ください。JS内にCSSをバンドルしたくない場合JavaScript内にバンドルすることがwebpackの利点であると紹介してきましたが、一般的なウェブサイト制作ではcssファイルを用意してstyleタグで読ませる場合が多いでしょう。src="main.js"></script>▲一般的なスタイルシートの読み込み方webpackのMiniCssExtractPluginミニ・シーエスエス・エクストラクト・プラグインを使うと、それが実現できます。このプラグインはバンドルしたJavaScriptから任意のテキスト(スタイルシートの部分)を別ファイルとして(CSSファイルとして)出力できます。詳しくはサンプルファイルを用意したので、次のリンクを参照ください。mini-css-extract-plugin従来は「ExtractTextPluginエキストラクト・テキスト・プラグイン」が使われていましたが、2019年現在は非推奨となっています。そのため、ExtractTextPluginではなくMiniCssExtractPluginを利用ください。PostCSS(Autoprefixer)のバンドル方法スタイルシートに関してはベンダープレフィックスを付与するのが一般的でしょう。11への対応を考慮すると、ベンダープレフィックスを付与するのが安全です。webpack単体ではその機能は存在しないので、PostCSSの機能を読み込んで実現します。AutoprefixerはPostCSSの中の1つのモジュールであるため、利用するにはPostCSSとAutoprefixerを両方インストールする必要があります。サンプルは次のリンクにあるので、手順がわからなければ参照ください。PostCSS用のサンプルモジュールのインストールコマンドラインで次のコマンドを入力ください。似たような名前のモジュールが多くて不安になりますが、最低限必要なものです。autoprefixerインストールしたら、package.jsonはサンプルのファイルと同じような内容となるはずです。設定ファイル続いて、webpack.config.jsファイルに次の設定を追記します。ソースマップを有効にしています。}};PostCSSの設定はpostcss-loader内のオプションで指定しています。コマンドラインを叩いて確認してみましょう。このコマンドで、dist/main.jsに書き出されます。webpackなお、PostCSSの人気のモジュールの1つにcssnanoというものがあります。minifyと呼ばれる空白文字を取り除くだけでなく、構造解析をしたうえで重複したCSSを整理してくれるモジュールです。まとめJavaScriptだけではなくCSSもwebpackで一元管理すると、webpackの周辺技術をふんだんに使えるため開発が楽になります。CSSの編集で、webpack-dev-serverでローカルサーバーを立てれるのはとても便利です。webpackの設定ファイルははじめはややこしいかもしれませんが、コピペで動かして少しずつ理解していくといいでしょう。書き慣れてくると、痒いところまで手がとどくのでwebpackの柔軟性に利点を感じるようになってきます。ウェブ制作の現場では、CSSにベンダープレフィックスを付与することも多いでしょう。そのときにはAutoPrefixerなどPostCSSの技術を利用します。令和元年8月19日に内容をメンテナンスしています。