webpack打包报错_魔法注释原因[webpackChunkName]

原由

项目搭建好之后进入开发阶段，刚开始时候偶尔打包看看，一切都很顺利，但随着项目开发任务越来越多，代码量越来越大，参与的人员越来越多，反而没有再去尝试打包看结果了。有一次突然想起来打包看下结果咋样，结果就报错了，报错原因写的是 dist/static/css/*.152bf007.css这种格式的什么css 或者 js 找不到，没有这些文件。 如图：

查找资料和小组讨论，定位可能是路由配置文件里面写了 webpack 的魔法注释导致的打包失败问题，然后我就继续百度查这个webpack的 webpackChunkName ，然后自己一点点调试，先把所有的路由配置里面webpack魔法注释全删了，加上其中一个魔法注释，再去打包，结果打包成功了。想到应该是魔法注释哪里写的有问题，然后又添加了几个webpack 魔法注释，也没有报错，再次说明是魔法注释哪里写的有问题，最后发现是404页面导的魔法注释/* webpackChunkName: "*" */ ，魔法注释起名字不规范导致的，其实报错中也提示了

使用

import()函数是ES6 Module的语法。用于完成动态加载既运行时加载。

import() 函数返回的是一个Promise ，类似于 CommonJs中的 require() ,两者的主要区别是，import()是异步加载， require()是同步加载

路由懒加载 import 异步加载的写法实现页面模块 lazy loading 懒加载（Vue中的路由异步加载）

vue中 运用 import 的懒加载语句以及 webpack 的魔法注释，在项目进行webpack 打包的时候，对不同模块进行代码分割。

在首屏加载时，用到哪个模块再加载哪个模块，实现懒加载进行页面的优化。 路由懒加载作为性能优化的一种手段，他能让路由组件延迟加载，通常我们还会为延迟加载的路由添加 “魔法注释(webpackChunkName)” 来自定义包名，再打包时，该路由组件会被单独打包出来。

webpack中可以用占位符[request] 来展示实际解析的文件名。

const routeOptions = [
  {
    path:'/login',
    name:'login',
  },
  {
    path:'/index',
    name:'index',
  },
  {
    path:'/detail',
    name:'detail',
  },
]
 
const routes = routeOptions.map(route => {
  if (!route.component) {
    route = {
      ...route,
      component: () => import(/* wbpackChunkName: "[request]"*/`@/views/${route.name}.vue`)
    }
  }
  return route
})
 
let router = new Router({
  routes
})

使用[request] 来告诉 webpack ，这里的值时根据后面传入的字符串来决定的，本例中就是变量 route.name 的值