先日、クライアントワークで画像をBase64形式にエンコードして使うことがあり、それに合わせてwebpackの環境を準備したので備忘録として残しておきたいと思います。画像をBase64形式の文字列として扱うことで、HTTPのリクエストを減らすなどいくつかパフォーマンスの面でもメリットがみられますので、積極的に取り入れてみたいですね。   本記事ではwebpackの環境構築が整っている前提で進めています。詳しい環境構築については、下記の記事を合わせてご参考ください。TypeScriptやESlintの設定などは過去記事「webpackでESLintが使える環境を構築してみる」をご覧ください。 （参考記事） webpackでTypeScriptの自動コンパイル環境を作成してみる webpackでStylelintが使える環境を構築してみる webpackで画像圧縮を自動化する環境を構築する webpackでBrowserSyncを使った自動リロード機能を作成してみる webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする webpackでBabelを使ったJavaScriptトランスパイルの環境構築   では最初に今回のディレクトリ構成を見ていきます。ここでは下記のような構成をもとに進めています。ソースファイルが格納される「src」ディレクトリと、コンパイル後のファイルが格納される「dist」ディレクトリに分かれます。

dist
  ┣ assets
    ┣ images
    ┣ stylesheets
    ┗ scripts
  ┗ index.html
src
  ┣ img
    ┗ image.png
  ┣ scss
    ┗ main.scss
  ┗ ts
    ┗ main.ts
node_modules
.eslintrc.js
.stylelintrc.json
tsconfig.eslint.json
tsconfig.json
package.json
webpack.config.js

  続いてwebpackの設定ファイルを用意していきます。webpackで画像をBase64形式にエンコードするには、画像アセットをJavaScriptで読み込む必要があります。そのため、webpack4系以前では「file-loader」や「url-loader」といった各種ローダーが必要になりますが、webpack5系以降であればそれらは不要でデフォルトの機能として用意されています。   その指定方法ですが、rulesのオプションで「type」を「asset」と指定するだけでOKというとてもシンプルなものになります。「test」で画像拡張子を指定することで、画像ファイルをバンドル対象のリソースとして扱うことができます。そして「output」のオプションで、バンドル対象の画像を外部ファイルとして扱う場合の出力先を相対パス指定で記述します。この際に、デフォルトでファイル名がハッシュ値となってしまうので、元のファイル名が保持されるように以下のように指定すると良いですね。 【webpack.config.js】※一部省略

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');
.....
const directoryPath = {
  root: path.resolve(__dirname, ''),
  dist: path.resolve(__dirname, 'dist'),
  src: path.resolve(__dirname, 'src')
}
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: {
    main: `${directoryPath.src}/ts/main.ts`,
  },
  output: {
    path: `${directoryPath.dist}/assets`,
    filename: 'scripts/[name].min.js',
    assetModuleFilename: 'images/[name][ext][query]'
  },
  module: {
    rules: [
      .......
      {
        test: /\.css$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: 'css-loader',
            options: {
              url: true,
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          { loader: MiniCssExtractPlugin.loader },
          {
            loader: 'css-loader',
            options: {
              url: true,
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [ 'autoprefixer', { grid: true } ],
                  [ 'cssnano', { preset: 'default' } ]
                ]
              },
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      },
      {
        test: /\.(gif|png|jpg|jpeg)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024,
          },
        },
      },
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'stylesheets/main.min.css' }),
    new StylelintPlugin({ configFile: `${directoryPath.root}/.stylelintrc.json` }),
    new CopyPlugin({
      patterns: [
        {
          from: `${directoryPath.src}/img`,
          to: `${directoryPath.dist}/assets/images/_min/[name]_min[ext]`
        }
      ]
    }),
    .......
  ],
  target: [ 'web', 'es5' ],
  performance: {
    maxEntrypointSize: 512000,
    maxAssetSize: 512000
  }
}

  そのほか注意しておきたい点として、今回はCSS側で画像リソースをBase64に置き換える形になりますので、「css-loader」のオプションで、「url」の値をtrueにしておくことが重要です。これがfalseになると、JavaScript側で画像リソースを参照できなくなるため、必須となる指定です。そして、parserのオプションである「dataUrlCondition」では、Base64にエンコードする対象画像のファイルサイズの上限を設定することができます。Base64エンコードをするとファイルサイズが上がってしまうので、あまり大きな画像を変換してしまうとCSSファイルが肥大してしまうので、このように上限を設定し、上限を超えるものはエンコードせずに外部ファイルとして扱われるようにすると良いですね。   また、「type」の値については下記のオプションが用意されており、目的に応じて使い分けるようにします。  

asset/resource	バンドル対象のファイルを外部ファイルとして扱う
asset/inline	バンドル対象のファイルをBase64エンコードしてコード内に直接埋め込む
asset	asset/resourceの指定とasset/inlineの指定が閾値に合わせて自動で切り替わるようになる

  これでCSS側で画像ファイルを読み込みます。今回はSassファイルをCSSにコンパイルする想定ですので、Sassファイルからの相対パスで対象の画像を指定します。 【src/scss/main.scss】

.example {
  width: 100%;
  height: 100vh;
  background: url(../img/image.png) no-repeat center center/cover;
}

  先ほどのSassファイルをJavaScript側でインポートして、CSSファイルにコンパイルしていきます 【src/ts/main.ts】

import '../scss/main.scss';

  コンパイルされたCSSを見ると、URLパスで外部ファイルを参照している形ではなく、Base64形式にエンコードされて直接CSSのコード内に埋め込まれているのが確認できます。 【dist/assets/stylesheets/main.min.css】

.example{background:url(data:image/png;base64,iVBORw0KG....rkJggg==) no-repeat center center/cover;

 

---

  今回はwebpackで画像ファイルをバンドルしてBase64形式にエンコードしてCSSファイル内で扱う方法をまとめてみました。ウェブサイトに求められるパフォーマンスへの重要度は日々増してきている印象ですので、こういったテクニックを効果的に活用していきたいですね。