使用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} />

我觉得必须有某种方法可以动态地从特定目录中导入所有文件（不带扩展名），然后根据需要使用这些文件。

任何人都看过此事，或者对最佳解决方案有任何想法？

更新：

使用选择的答案，我能够做到这一点：

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']} />

const importAll = require => require.keys().reduce((acc, next) => { acc[next.replace("./", "")] = require(next); return acc; }, {}); const images = importAll( require.context("./image", false, /\.(png|jpe?g|svg)$/) );