title: Dynamically import images from a directory using webpack
body: <p>So here's my current workflow for importing images and icons in webpack via ES6:</p>
  
  <pre><code>import cat from './images/cat1.jpg'
  import cat2 from './images/cat2.svg'
  import doggy from './images/doggy.png'
  import turtle from './images/turtle.png'
  
  &lt;img src={doggy} /&gt;
  </code></pre>
  
  <p>This gets messy quick. Here's what I want:</p>
  
  <pre><code>import * from './images'
  
  &lt;img src={doggy} /&gt;
  &lt;img src={turtle} /&gt;
  </code></pre>
  
  <p>I feel like there must be some way to dynamically import all files from a specific directory as their name sans extension, and then use those files as needed.</p>
  
  <p>Anyone seen this done, or have any thoughts on the best way to go about it?</p>
  
  <hr>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>Using the selected answer, I was able to do this:</p>
  
  <pre><code>function importAll(r) {
    let images = {};
    r.keys().map((item, index) =&gt; { images[item.replace('./', '')] = r(item); });
    return images;
  }
  
  const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/));
  
  &lt;img src={images['doggy.png']} /&gt;
  </code></pre>