Блог

Я создал пакет компонентов vue my-custom-comp , который содержит динамический импорт: my-custom-comp.vue

 <template>
  <component v-if="id amp;amp; 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