Javascript 使用webpack[request]magic comment将动态模块捆绑为一个模块

期望输出成块 关于-vue.de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js Home-vue.de9bf8b8.js.map

但实际结果是 [请求].de9bf8b8.js app.cb7314dd.js chunk-vendors.cc2e3269.js

当我省略[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: "[request]" */
    `@/views/Home.vue`)
},
{
  path: '/about',
  name: 'about',
  component: () => import(  /* webpackChunkName: "[request]" */
    `@/views/About.vue`)



}
  ]
})

---

在这种方法中，当我省略[request]时，它也可以正常工作，但是如果没有专有名称，my Bundle很难管理和调试。magic注释不会被动态替换。任何使用注释名称的地方都会按该名称将资产分组为单个块

如果您只是在寻找适当的名称，请使用组件的名称，而不是

[request]

作为块名

function getComp(fileName)

{

console.log(‘func called’)

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

}

[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`)
    }
  ]
});

然后，您将根据用户的偏好导入其中一个。然后你导入它 详情如下:

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

当webpack构建它们时，它会将这两个区域设置保存为它们的原始文件名。你可以 还可以使用

locale-[request]

将它们分别保存为

locale en

和

locale bn

---

但是当您确定要导入哪个文件时，为什么要使用

[request]

？只要用你已经知道的名字。有关更多信息，请参阅。

您试图实现的目标有点令人困惑。您想将不同的模块捆绑在一起（如标题中所述），还是给它们起一个有意义的名称？您有

/*webpackChunkName:“[request]”“*/

，那么您为什么会对得到一个名为

[request]

的模块感到惊讶呢？这就是问题所在。我希望块具有有意义的名称，但添加名称会导致它们捆绑在一起。第一个代码块按预期工作。但是，由于您成功地使它与第二个代码块中的函数和

[request]

一起工作，现在的问题是什么？在第一个代码块中，我想要两个块，但相应的名称作为文件名，而我得到的是一个作为请求的单块名称，而不是请求关键字，因为我理解，但对于我也知道的文件，我认为这会更容易使用

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