読者です 読者をやめる 読者になる 読者になる

Webpackでcss, sassと画像を扱う

WebpackでCSS, Sass, svgを扱う方法を紹介する。 LESSやpng, gifなどには対応していないが、同じように出来ると思う。 サンプルリポジトリも作ってみた。

github.com

参考

stylesheets

github.com

github.com

github.com

github.com


WebpackでCSSを扱う場合、

  • syle-loaderを使ってJSでDOM操作してheadの最後にstyle要素として出力
  • extract-text-webpack-pluginを使って出力したcssファイルをlink要素でロード

のいずれかになる。

extract-text-webpack-pluginを使うメリット・デメリット

GitHub - webpack/extract-text-webpack-plugin: Extract text from bundle into a file.

にメリット・デメリットが挙げられている。 個人的にはextract-text-webpack-plugin使うほうが良いと思っている。

メリット

  • CSS ソースマップを生成できる
  • CSSリクエストをパラレルに出来る
  • CSSを別にキャッシュ出来る
  • 高速(コード量とDOM操作が少なくなる)

デメリット

  • HTTPリクエストが増える
  • コンパイル時間がかかる
  • 設定が複雑になる
  • Public Pathを修正するランタイムがない
  • HMR(Hot Module Replacement)が効かない

@import 及び url()でのパスの扱い

import及びurlは基本的にrequire()と同様に扱われ、 css-loaderで処理される。

ただし、パスが/から始まっている場合、変換されない。 css-loaderで処理したくない場合に使えるが、リクエスト数は増えてしまう。

urlを~から始めると、resolve.rootからの相対パス扱いになる。

Webpackでの画像の扱い

Webpackでは画像をData URIとしてJSやCSSに埋め込むことができる。 これにより、コードのファイルサイズは大きくなるもののリクエスト数を減らすことができる。

JSで画像を扱う場合

JSでimg要素を描画する場合など、画像を扱うことがある。 その時は require()で画像を読み込めばよい。

サンプルリポジトリの説明

GitHub - suzuki-shunsuke/example-webpack

2つのサンプル s1とs2に分かれている。 s1ではimportを使って依存関係を管理し、必要なcssだけをパックしたcssを生成している。 s2ではimportを使わず、全てのcssを結合して1つのcssを生成している。

後者だとWebサイトのページ数が増えるに連れてcssが肥大化し、不要なcssまで読み込まないといけないという問題があるため、 前者のほうが良いと思うのだが、 依存関係の管理をやらないといけないコストはかかる。あとビルドも時間かかる。