title: Is it possible to use `require.context` to do dynamic imports for Webpack?
body: <p>I am currently using <code>require.context</code> to load all my <code>.vue</code> components that do not have a filename ending with <code>Async</code>.</p>
  
  <pre><code>const loadComponents = (Vue) =&gt; {
      const components = require.context('@/components', true, /\/[A-Z](?!\w*Async\.vue$)\w+\.vue$/);
  
      components.keys().forEach((filePath) =&gt; {
          const component = components(filePath);
          const componentName = path.basename(filePath, '.vue');
  
          // Dynamically register the component.
          Vue.component(componentName, component);
      });
  };
  </code></pre>
  
  <p>Now I want to load the my components that end with <code>Async</code> with <code>require.context</code> so I don't have to manually add them whenever I create a new component of this type.</p>
  
  <p>Normally the dynamic import syntax would look like this:</p>
  
  <pre><code>Vue.component('search-dropdown', () =&gt; import('./search/SearchDropdownAsync'));
  </code></pre>
  
  <p>This will get resolved with a promise and import the component dynamically.</p>
  
  <p>The problem that occurs is that when you use <code>require.context</code>, it will immediately load(require) the components and I am unable to use the dynamic import.</p>
  
  <p>Is there any way to combine <code>require.context</code> with the dynamic import syntax of Webpack?</p>
  
  <p><a href="https://webpack.js.org/guides/code-splitting/#dynamic-imports" rel="noreferrer">https://webpack.js.org/guides/code-splitting/#dynamic-imports</a></p>