メサイア・ワークス

webpackで、画像もcssも1つのJSファイルにまとめてみた。

webpackで、画像もcssも1つのJSファイルにまとめてみた。

前回の続き

webpack-dev-serverとwebpack.config.jsを使って、ローカルWebサーバでソース修正をブラウザに即時反映させる。

1, 画像・cssをwebpackにまとめるには、追加パッケージが必要なのでインストールする。

2, webpack.config.jsを修正して、style-loader・css-loader・file-loaderを適用する

3, src/style.cssを追加して、適当なCSSを記述。src/a.jpgも適当な画像で追加

4, src/index.jsにstyle.cssを追加

5, dist/index.htmlに、css対象先のh1と、バンドルした画像表示のタグを追加

6, 開発ローカルサーバでCSSと画像が適応されているか確認する。

画像のバンドルはbase64エンコードするので、大きな画像だと容量が増える。なので、オーバーヘッドが減らすためにアイコンなど小さい画像沢山が基本っぽい。

モバイルバージョンを終了