title: How to test webpack require.context function
body: <p><a href="https://i.stack.imgur.com/Qf8rV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qf8rV.png" alt="enter image description here"></a></p>
  
  <p>I have a vue carousel component and I want to generate a list of The .png files in the static folder. Following <a href="https://stackoverflow.com/questions/42118296/dynamically-import-images-from-a-directory-using-webpack">Dynamically import images from a directory using webpack</a> and Following <a href="https://webpack.js.org/guides/dependency-management/#context-module-api" rel="nofollow noreferrer">https://webpack.js.org/guides/dependency-management/#context-module-api</a> my component looks like:</p>
  
  <pre><code> &lt;template&gt;
    &lt;v-carousel&gt;
      &lt;v-carousel-item v-for="(item,i) in items" :key="i" :src="item.src"&gt;&lt;/v-carousel-item&gt;
    &lt;/v-carousel&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
    // https://stackoverflow.com/questions/2727167/how-do-you-get-a-list-of-the-names-of-all-files-present-in-a-directory-in-node-j
    var cache = {};
    function importAll(r) {
      r.keys().forEach(key =&gt; cache[key] = r(key));
    }
    var getImagePaths = importAll(require.context('../static/', false, /\.png$/));
    // At build-time cache will be populated with all required modules. 
    export default {
      data: function() {
        return {
          items: getImagePaths
        };
      }
    };
    //     export default {
    //       data() {
    //         return {
    //           items: [{
    //               src: "/52lv.PNG"
    //             },
    //             {
    //               src: "https://cdn.vuetifyjs.com/images/carousel/sky.jpg"
    //             },
    //             {
    //               src: "https://cdn.vuetifyjs.com/images/carousel/bird.jpg"
    //             },
    //             {
    //               src: "https://cdn.vuetifyjs.com/images/carousel/planet.jpg"
    //             }
    //           ]
    //         };
    //       }
    //     };
    //
  &lt;/script&gt;
  </code></pre>
  
  <p>The commented out sections work to load the carousel image so I need to generate an object that looks like items. I realize I'm not there yet but when I run the  dev server I see :</p>
  
  <pre><code>[Function: webpackContext] {                                                                                                                          
  20:20:42
   keys: [Function: webpackContextKeys],
   resolve: [Function: webpackContextResolve],
   id: './static sync \\.png$'
  }
  </code></pre>
  
  <p>What does this mean and how can I test if I have the right path with the webpack require.context() function?</p>