[解決済み] webpack を使ってディレクトリから画像を動的にインポートする

質問

ES6を使ってwebpackで画像やアイコンを取り込むための現在のワークフローを紹介します。

import cat from './images/cat1.jpg'
import cat2 from './images/cat2.svg'
import doggy from './images/doggy.png'
import turtle from './images/turtle.png'

<img src={doggy} />

これはすぐに厄介なことになります。私が欲しいのはこんな感じです。

import * from './images'

<img src={doggy} />
<img src={turtle} />

特定のディレクトリにあるすべてのファイルを、拡張子を除いた名前で動的にインポートし、必要に応じてそれらのファイルを使用する方法があるはずだと感じています。

誰かこれが行われるのを見たか、またはそれについて最善の方法についての考えをお持ちですか?

UPDATEです。

選択した回答を使って、こんなことができました。

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  return images;
}

const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));

<img src={images['doggy.png']} />

どのように解決するのですか？

特定のディレクトリにあるすべてのファイルを、拡張子を除いた名前で動的にインポートし、必要に応じてそれらのファイルを使用する方法が必要な気がします。

ES6ではありません。全体のポイントは import と export は、依存関係を決定することができることです 静的 つまり、コードを実行することなく決定できることです。

しかし、あなたはwebpackを使用しているので、以下を参照してください。 require.context . というようにすればよい。

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));