При использовании webpack [request] волшебный комментарий объединяет динамические модули в один

Question

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
{
  path: '/home',
  name: 'home',
  component: () => import(  /* webpackChunkName: "[request]" */
    `@/views/Home.vue`)
},
{
  path: '/about',
  name: 'about',
  component: () => import(  /* webpackChunkName: "[request]" */
    `@/views/About.vue`)



}
  ]
})

Ожидаемый вывод в чанках About-vue.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js Home-vue.de9bf8b8.js.map

Но фактический результат - [request].de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js

Когда я опускаю [запрос] или попробуйте с помощью функции, как

function getComp(fileName)

{

console.log(‘func called’)

return ()=>import(/* webpackChunkName: “[request]” */ @/views/${fileName}.vue)

}

в этом подходе он работает, он также отлично работает, когда я опускаю [запрос], но мои пакеты сложно управлять и отлаживать без собственных имен

Answer 1

Волшебный комментарий не заменяется динамически. И где бы ни использовалось имя комментария, мы сгруппируем ресурсы в один блок с этим именем.

Answer 2

Если вы просто ищете собственные имена, используйте имя вашего компонента вместо [request] как имя куска.

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/home',
      name: 'home',
      component: () => import(  /* webpackChunkName: "Home" */ `@/views/Home.vue`)
    },
    {
      path: '/about',
      name: 'about',
      component: () => import(  /* webpackChunkName: "About" */ `@/views/About.vue`)
    }
  ]
});

[request] заполнитель предназначен для импорта файлов в зависимости от условий. Предположим, у вас есть несколько локалей следующим образом.

> locales/en.js
> locales/bn.js

Затем вы собираетесь импортировать один из них в зависимости от предпочтений пользователя. Затем вы импортируете его следующим образом:

const lang = "en";
import(/* webpackChunkName: "[request]" */ `./locales/${lang}`).then(lang_module => {
    // do something with english locale
});

Когда веб-пакет создает их, он сохраняет обе локали как их исходные имена файлов. Вы также можете использовать locale-[request] чтобы сохранить их как locale-en а также locale-bn соответственно.

Но когда вы точно знаете, какой файл вы собираетесь импортировать, зачем использовать [request]? Просто используйте имя, которое вы уже знаете. Смотрите волшебные комментарии для получения дополнительной информации.