Я сделал пакет компонентов vue my-custom-comp
, который содержит динамический импорт:
my-custom-comp.vue
<template>
<component v-if="id && data" :is="`list-${id}`" :data="data" />
</template>
<script>
export default {
props: ['id','data'],
components: {
'list-1': () => import(/* webpackChunkName: "MyTaglist0" */'./list-1.vue'),
'list-2': () => import(/* webpackChunkName: "MyTaglist0" */'./list-2.vue'),
'list-3': () => import(/* webpackChunkName: "MyTaglist1" */'./list-3.vue'),
'list-4': () => import(/* webpackChunkName: "MyTaglist1" */'./list-4.vue')
}
}
</script>
Выходные файлы в lib:
my-custom-comp.common.js
my-custom-comp.common.MyTaglist0.js
my-custom-comp.common.MyTaglist1.js
В моем приложении установлен пакет my-custom-comp
, и я добавляю путь к resolve.modules
:
webpack.config.js
module.exports = {
...
resolve: {
modules: [path.join(__dirname, '../node_modules'), path.join(__dirname, '../node_modules/my-custom-comp/lib')],
}
...
}
но MyTaglist0.js
не может быть разрешено:
GET http://localhost:8882/my-custom-comp.common.MyTaglist0.js net::ERR_ABORTED 404 (Not Found)
Как разрешить динамический импорт из node_modules?
Тест Репо:
https://github.com/Miaoxingren/webpack-issue-8934