Question

s = "43gfd**54452**jhg4**fddsgf**"

预期以大块放置 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

当我忽略[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]时，它也可以正常工作，但是没有适当的名称，我的捆绑包就很难管理和调试

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。

使用webpack [request]魔术注释将动态模块捆绑在一起

2 个答案: