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

【问题标题】：Using webpack [request] magic comment is bundling together dynamic modules as one使用 webpack [request] 魔术注释将动态模块捆绑在一起
【发布时间】：2019-06-28 07:16:48
【问题描述】：

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 主页-vue.de9bf8b8.js.map

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

当我省略 [request] 或尝试使用类似的功能时

function getComp(fileName)

{

console.log(‘func called’)

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

}

在这种方法中它可以工作，当我省略 [request] 时它也可以正常工作，但是如果没有正确的名称，我的包很难管理和调试

【问题讨论】：

您想要实现的目标有点令人困惑。您想将不同的模块捆绑在一起（如标题中所述），还是给它们起有意义的名称？
你有/* webpackChunkName: "[request]" */，为什么你会惊讶于你得到一个名为[request]的块？那是expected behavior。
我想要具有有意义名称的块，但是添加名称会导致它们捆绑在一起
第一个代码块按预期工作。但是，既然您设法使其与第二个代码块中的函数和 [request] 一起工作，那么现在有什么问题？
在第一个中，我想要 2 个块，但将相应的名称作为文件名，而不是我得到的是单个块名称作为请求，这不是请求关键字的用途

标签： javascript vue.js webpack webpack-4 dynamic-import

【解决方案1】：

魔术注释不会被动态替换。并且任何使用评论名称的地方都会按该名称将资产分组到一个块中

【讨论】：

【解决方案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 了解更多信息。

【讨论】：

我明白了，但是对于我也知道的文件，我认为这会更容易使用