Можно ли использовать require.context с динамическим импортом для Webpack? - PullRequest
Новая
       10

Можно ли использовать require.context с динамическим импортом для Webpack?

0 голосов
/ 26 апреля 2018

Я сейчас использую require.context для загрузки всех моих .vue компонентов, у которых нет имени файла, заканчивающегося Async. 

const loadComponents = (Vue) => {
    const components = require.context('@/components', true, /\/[A-Z](?!\w*Async\.vue$)\w+\.vue$/);

    components.keys().forEach((filePath) => {
        const component = components(filePath);
        const componentName = path.basename(filePath, '.vue');

        // Dynamically register the component.
        Vue.component(componentName, component);
    });
};

Теперь я хочу загрузить свои компоненты, которые заканчиваются на Async на require.context, поэтому мне не нужно добавлять их вручную, когда я создаю новый компонент этого типа.

Обычно синтаксис динамического импорта будет выглядеть так: 

Vue.component('search-dropdown', () => import('./search/SearchDropdownAsync'));

Это будет решено с помощью обещания и динамического импорта компонента.

Проблема, которая возникает, заключается в том, что при использовании require.context он немедленно загружает (требует) компоненты, и я не могу использовать динамический импорт.

Есть ли способ объединить require.context с синтаксисом динамического импорта в Webpack?

https://webpack.js.org/guides/code-splitting/#dynamic-imports

1 Ответ

0 голосов
/ 19 февраля 2019

Существует четвертый аргумент для require.context, который может помочь с этим.

https://webpack.js.org/api/module-methods/#requirecontext

https://github.com/webpack/webpack/blob/9560af5545/lib/ContextModule.js#L14

const components = require.context('@/components', true, /[A-Z]\w+\.(vue)$/, 'lazy');
components.keys().forEach(filePath => {

  // load the component
  components(filePath).then(module => {

    // module.default is the vue component
    console.log(module.default);
  });
});
...