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

前回の続き

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

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

# 画像ファイル = file-loader
# cssファイル = style-loaderとcss-loader
npm i -D style-loader css-loader file-loader

# 画像ファイル = file-loader

# cssファイル = style-loaderとcss-loader

npm i -D style-loader css-loader file-loader

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

module.exports = {
    // モード値を production に設定すると最適化された状態で、
    // development に設定するとソースマップ有効でJSファイルが出力される
    mode: "development",
    // cssをバンドルする
    module: {
      rules: [
        // CSSファイルのルールを追加
        {
          test: /\.css/,
          use: [
            "style-loader",
            {
              loader: "css-loader",
              options: { url: false }
            }
          ]
        },
        // 画像ファイルのルールを追加
        {
          // file-loader。名前をファイル名のままで維持する
          test: /\.(jpg|png)$/,
          loaders: 'file-loader?name=[name].[ext]'
        }
      ]
      
    },

    // ローカル開発用環境を立ち上げる
    // 実行時にブラウザが自動的に localhost を開く
    devServer: {
      contentBase: "dist",
      open: true
    }
  };

module.exports = {

// モード値を production に設定すると最適化された状態で、

// development に設定するとソースマップ有効でJSファイルが出力される

mode: "development",

// cssをバンドルする

module: {

rules: [

// CSSファイルのルールを追加

{

test: /\.css/,

use: [

"style-loader",

{

loader: "css-loader",

options: { url: false }

}

]

// 画像ファイルのルールを追加

{

// file-loader。名前をファイル名のままで維持する

test: /\.(jpg|png)$/,

loaders: 'file-loader?name=[name].[ext]'

}

]

// ローカル開発用環境を立ち上げる

// 実行時にブラウザが自動的に localhost を開く

devServer: {

contentBase: "dist",

open: true

}

};

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

h1 {
    color: #ff0000;/*文字色*/
}

h1 {

color: #ff0000;/*文字色*/

}

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

// import 文を使ってstyle.cssファイルを読み込む。
import "./style.css";

// import 文を使って sub.js ファイルを読み込む。
import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。
hello();

// import 文を使ってstyle.cssファイルを読み込む。

import "./style.css";

// import 文を使って sub.js ファイルを読み込む。

import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。

hello();

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

<script src="main.js"></script>
<h1>hello,world</h1>
<img src="a.jpg">

<h1>hello,world</h1>

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

npm run start

1	npm run start

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

関連記事