vue webpack动态打包chunk名称问题

我们在使用vue新建项目时，其中在路由配置文件中看到了return import(/* webpackChunkName: "about" */ '../views/About.vue')这个注释，

路由中webpack chunkName

作用就是webpack在打包的时候，使用异步路由以及异步引入的库代码进行代码分割时（需要配置webpack的SplitChunkPlugin插件），为分割后的代码块取得名字。

另外 import()异步加载的写法实现页面模块lazy loading懒加载（Vue中的路由异步加载）：
Vue中运用import的懒加载语句以及webpack的魔法注释，在项目进行webpack打包的时候，对不同模块进行代码分割，加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。

动态import()打包出来文件的name是0.js,1.js,2.js,3.js ...依次排列,有时候我们希望打包出来的文件名是打包前的文件名称，要实现这，需要经历3各步骤：
1.在webpack配置文件中的output中添加chunkFilename。命名规则根据自己的项目来定，其中[name]就是文件名，这一块更详细的说明请点击这里。

//其他代码..
output:{
  path: path.resolve(__dirname,'public'),
  filename:'[name].[hash:8].js',
  chunkFilename:'[name].[hash:8].js'
}

2.在动态import()代码处添加注释webpackChunkName告诉webpack打包后的chunk的名称（注释中的内容很重要，不能省掉），这里打包以后的name就是MyFile。

import(/* webpackChunkName: "MyFile" */`../containers/MyFile`)

3.大多数情况下我们使用动态import()是通过循环来做的，这样我们就不得不引入变量了，使用[request]来告诉webpack，这里的值是根据后面传入的字符串来决定，本例中就是变量pathName的值，具体如下：

import(/* webpackChunkName: "[request]" */`../containers/${pathName}`)