В настоящее время я использую 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
