画像、フォント、およびファイルの追加

webpackを使用すると、画像やフォントなどの静的アセットはCSSと同様に動作します。

JavaScriptモジュールでファイルを直接importできます。これにより、webpackはそのファイルをバンドルに含めます。 CSSのインポートとは異なり、ファイルをインポートすると文字列値が得られます。この値は、コード内で参照できる最終的なパスです。たとえば、画像のsrc属性やPDFへのリンクのhrefとして使用できます。

サーバーへのリクエスト数を減らすため、10,000バイト未満の画像をインポートすると、パスではなくデータURIが返されます。これは、bmp、gif、jpg、jpeg、pngのファイル拡張子に適用されます。#1153のため、SVGファイルは除外されます。 10,000バイトのしきい値は、高度な設定に記載されているように、IMAGE_INLINE_SIZE_LIMIT環境変数を設定することで制御できます。

例を次に示します

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

console.log(logo); // /logo.84287d09.png

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

これにより、プロジェクトのビルド時にwebpackが画像をビルドフォルダに正しく移動し、正しいパスを提供することが保証されます。

これはCSSでも機能します

.Logo {
  background-image: url(./logo.png);
}

webpackはCSS内のすべての相対モジュール参照（./で始まる）を見つけ、コンパイルされたバンドルからの最終パスに置き換えます。タイプミスをしたり、重要なファイルを誤って削除したりすると、存在しないJavaScriptモジュールをインポートしたときのように、コンパイルエラーが表示されます。コンパイルされたバンドルの最終的なファイル名は、コンテンツハッシュからwebpackによって生成されます。将来ファイルの内容が変更された場合、webpackは本番環境で別の名前を付けるため、アセットの長期キャッシュについて心配する必要はありません。

これはwebpackのカスタム機能でもあることに注意してください。

Reactには必須ではありませんが、多くの人が気に入っています（React Nativeは画像に同様のメカニズムを使用しています）。

静的アセットを処理する別の方法は、次のセクションで説明します。

SVGの追加

注：この機能は、react-scripts@2.0.0以降、およびreact@16.3.0以降で使用できます。

SVGファイルを追加する1つの方法は、上記のセクションで説明しました。 SVGをReactコンポーネントとして直接インポートすることもできます。 2つのアプローチのいずれかを使用できます。コードでは次のようになります

import { ReactComponent as Logo } from './logo.svg';

function App() {
  return (
    <div>
      {/* Logo is an actual React component */}
      <Logo />
    </div>
  );
}

これは、SVGを別のファイルとしてロードしたくない場合に便利です。インポートの中かっこを忘れないでください！ ReactComponentインポート名は重要であり、ファイル名ではなく、SVGをレンダリングするReactコンポーネントが必要であることをCreate React Appに伝えます。

ヒント：インポートされたSVG Reactコンポーネントは、svg要素が受け入れる他のプロパティとともに、titleプロパティを受け入れます。このプロパティを使用して、svgコンポーネントにアクセス可能なタイトルを追加します。

SVGの追加​

SVGの追加