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

Posted 2023-02-22

【中文标题】使用 webpack [request] 魔术注释将动态模块捆绑在一起

【英文标题】：Using webpack [request] magic comment is bundling together dynamic modules as one

【发布时间】：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 个块，但将相应的名称作为文件名，而不是我得到的是单个块名称作为请求，这不是请求关键字的用途

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

【讨论】：

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