使用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`)



}
  ]
})

预计将放入块中关于-vue.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js Home-vue.de9bf8b8.js.map

但实际结果是[请求] .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
});

当webpack构建它们时，它会将两个语言环境保存为原始文件名。您也可以使用locale-[request]将它们分别保存为locale-en和locale-bn。

但是当你确定要导入哪个文件时，为什么要使用[request]？只需使用您已知道的名称即可。有关更多信息，请参阅magic comments。