webpack - 如何在同一个chunk名称下动态导入多个Vue组件？

Question

我正在尝试将多个 Vue 组件作为一个 block 导入，我最好只使用 magic comment 来分配一次 block 名称。

这是我试过的:

import(/* webpackChunkName: 'googlemap' */'@/components/maps');

我正在导入的文件:

import Vue from 'vue';

Vue.component('google-map', () => import('@/components/maps/GoogleMapAsync.vue'));
Vue.component('widget', () => import('@/components/maps/widgets/WidgetAsync.vue'));
Vue.component('price-widget', () => import('@/components/maps/widgets/PriceWidgetAsync.vue'));
Vue.component('map-marker', () => import('@/components/maps/marker/MapMarkerAsync.vue'));
Vue.component('map-price-marker', () => import('@/components/maps/marker/MapPriceMarkerAsync.vue'));

这不会创建名称为 googlemap 的正确 block 。以前我只是简单地将 webpackChunkName 放在每个导入的前面，但我只想简单地分配一次 webpackChunkName 因为这些组件只会被分组。

我正在尝试做的事情与此基本相同:

https://hackernoon.com/effective-code-splitting-in-react-a-practical-guide-2195359d5d49#697a

还有其他方法可以让它工作吗？

Answer 1

我使用以下将每个文件名用作组件名称并在其前面加上 vue-

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component('Vue' + key.split('/').pop().split('.')[0], files(key).default))

这会给你你想要的。如果您愿意，您可以删除前缀，但是如果您有一个元素存在于 HTML 中或曾经创建过一个元素，我更愿意拥有它。