事件起因

百度查阅

webpackChunkName

结束了

事件起因

蒽，起因是这样的，项目从最初的使用 vue-cli 脚手架搭建了一个初始化空架子之后就开始写项目了，也就是在刚开始的一段时间里偶尔有过几次打包查看，那时候还是能够顺利打包成功的，但随着代码越写越多，插件越来越多，项目也越来越大，但反而并没有再去尝试过打包了，就这样，项目在写到一半的时候，突然想起来要打包一下看看咋样，结果报错，报错，还是报错，不是说什么 .css 就是什么 .js 的文件提示没有啥的，这个问题组内的小伙伴解决了两天时间，最后还是在请教了一个大佬帮忙查看后才最终得以解决掉，所以这也算是个在项目中所遇到的技术问题难点了吧，哈哈，那就索性记录一下，也让自己以后好引以为戒啊。

最后呢小伙伴给出的解释就是说：路由配置文件里面因为引用写了 webpack 的 魔法注释 而导致的打包失败，然后我就不是很理解，问了一下朋友，朋友说他们也用了魔法注释，并没有不能打包的情况啊，所以百度了一下这个 webpack 所谓的 魔法注释 ，最后自己又在项目中一点点去调试 => 先是把所有的路由配置里面的 webpack 魔法注释 都删除掉，然后先加上其中一个魔法注释，再去打包，结果顺利打包成功了，并没有报错，心想那应该就不是因为写了 魔法注释 的问题吧，随后又给一个路由加上了魔法注释后打包，发现也还是成功打包了，最后在朋友的提示下，说是 “ chunkname 可以用 * 吗？ ” ，然后就测试了一下把 ChunkName 起名为 * 号的那个加上后测试再打包就失败了，所以到最后发现影响打包失败的原因并不是人家 webpack 的魔法注释导致的，而是 “起名不规范” 的原因啊。。

（ * 号是不能作为名字来起文件名的）

好了，这下就是找到了打包问题的根本原因所在了， webpack 的魔法注释 webpackChunkName 并不会影响打包，而是起的名字有问题，不规范导致的，

因为起的名字它好像是打包编译后会变成对应的文件名 ，而既然是文件名了，肯定就是不能够以 * 号进行命名滴！文件或文件夹名以 * 命名会报错提示你：

名称 * 作为文件或文件夹名无效。请选择其他名称。

百度查阅

再下面的内容就是自己百度查阅的关于 webpack 魔法注释 的一些东西了：

使用 Webpack 如何做按需加载

大家都知道 Webpack 是现在流行的前端打包编译工具，通过模块之间的依赖关系，

将代码打包组织到一起。

webpack2.x 中提供了 import()

要注意的是 import() 函数不同于 import 命令，import 是 ECMAScript 6 Module 的语法，import 是静态执行，这里不多说，可以去看 import 命令。

import(specifier)

上面代码中，import 函数的参数 specifier ，指定所要加载的模块的位置，而且 specifier 可以是一个方法，动态的生成模块路径。import 命令能够接受什么参数，import() 函数就能接受什么参数，两者区别主要是后者为动态加载。

import() 函数是 ECMAScript Stage 3 草案阶段的语法；用于完成动态加载即运行时加载，可以用在任何地方。import() 函数返回的是一个 Promise。类似于 CommonJs 的 require() ，区别主要是前者是异步加载，后者是同步加载。

import 的应用场景有以下三种 ( 参考自 ECMAScript 6 入门 ) :

按需加载。import() 可以在需要的时候，再加载某个模块
条件加载。import() 可以放在 if 代码块，根据不同的情况，加载不同的模块。
动态的模块路径。import() 允许模块路径动态生成。

用法大致如下：

import('./myModule.js').then(myModule => {console.log(myModule.default);});

小结

目前我们用的比较多的是 import 来做 按需加载 ，模块路径可以动态生成，更适合现在的应用场景。

如何命名 chunk 的名称

有 /* webpackChunkName: " " */，号称是 Magic Comments（魔术注释法）。

Webpack 通过增加 内联注释 来告诉运行时，该有怎样的行为。通过向 import 中添加注释，我们可以执行诸如 命名 chunk 或 选择不同模式 之类的操作。

这里着重讲一下 webpackChunkName ，它其实就是对 chunkFilename 定义时 [name] 值的改写，/* webpackChunkName: "hello" */，意味着 [name] 等于 hello 。

于是上面的代码就会按照下面的方式来写，打包出来的 chunk文件 将会出现在 plugins文件夹下，名字叫 myModule.a2d1d5d8e7d5d4d4d4se.chunk.js 。

import(/* webpackChunkName: "plugins/myModule" */'./myModule.js').then(myModule => {console.log(myModule.default);});

更多的 魔术注释 ，请参考 Webpack官方文档。

webpackChunkName

之前在 vue 的路由配置文件中看到了 /* webpackChunkName:"lodash" */ 这个注释

webpackChunkName 有什么用

在学习了 webpack 之后了解其做用，Webpack 通过增加 内联注释 来告诉运行时，该有怎样的行为。通过向 import 中添加注释，我们可以执行诸如命名 chunk 或选择不同模式之类的操作。webpack 在打包的时候，对异步引入的库代码（lodash）进行代码分割时（需要配置 webpack 的 SplitChunkPlugin 插件），为分割后的代码块取得名字

如何命名 chunk 的名称

/* webpackChunkName: "hello" */，意味着 [name] 等于 hello。

import(/* webpackChunkName: "plugins/myModule" */'./myModule.js').then(myModule => {console.log(myModule.default);});

路由懒加载 ( 动态 chunkName )

官网链接地址

手写的规格

let router = new Router({routes: [{path:'/login',name:'login',component: import(/* webpackChunkName: "login" */`@/views/login.vue`)},{path:'/index',name:'index',component: import(/* webpackChunkName: "index" */`@/views/index.vue`)},{path:'/detail',name:'detail',component: import(/* webpackChunkName: "detail" */ `@/views/detail.vue`)}]
})

上面这种写法没问题，但仔细一看它们结构都是相似的，其中唯一不同的就是部分的页面名称而已，作为一名出色的ctrl+c/ctrl+v 开发者，我们要做到可以偷懒的时候就尽量偷懒，我们可以使用 map 循环来解决这种重复性的工作。

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(`@/views/${route.name}.vue`)}}return route
})let router = new Router({routes
})

在书写更少代码的同时，我们也把“魔法注释”给牺牲掉了。总所周知，代码中没办法编写动态注释。这个问题很尴尬，难道就没有两全其美的办法了吗？

强大的 webpack 来救场了，从 webpack 2.6.0 开始，占位符 [index] 和 [request] 被支持为递增的数字或实际解析的文件名。我们可以这样使用“魔法注释”：

const routes = routeOptions.map(route => {if (!route.component) {route = {...route,component: () => import(/* webpackChunkName: "[request]" */`@/views/${route.name}.vue`)}}return route
})

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

结束了

到此为止，我们已经可以将代码打包到多个文件，每个 chunk 可以独立命名，是的就是这样。

Webpack打包之坑 _ webpackChunkName【魔法注释】相关推荐

webpack打包压缩混淆_细说webpack系列 3. webpack-cli 零配置打包
大家好!我是萝卜,webpack 4 带来了大量的更新,其中一个就是webpack 4 默认不需要配置文件,下面就带大家体验一下! 初始化项目首先创建项目,创建一个名为webpack的文件夹,进入文 ...
webpack 打包ts项目_使用webpack打包ts
初始化package.json npm init -y cnpm i -D webpack webpack-cli(webpack命令行工具) typescript ts-loader(整合) 2.1 ...
webpack打包样式资源_使用loader去打包css文件_打包less文件---webpack工作笔记004
然后我们再来看看,怎么用webpack打包css资源文件, 因为我们知道webpack可以直接处理js,json文件,但是不能直接处理css文件,img文件对吧.. 我们现在,通过webpack的组件 ...
webpack打包压缩混淆_前端打包利器：webpack工具
一.什么是WebPack,为什么要使用它? 1.为什要使用WebPack 现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包.为了简化开发的复杂度,前端 ...
webpack打包路径更改_扫盲： Webpack 从扫盲到手撸（上）
鹿哥,作为前端初学者,能不能给扫盲一下 webpack,毕竟这东西在学校项目中用到的少,还是特别想了解一下的. 说起 webpack,小鹿会专门出一个系列,从简单的扫盲到手撸,这是一个过程,只要能踏实 ...
python3.7打包exe坑_[求助]入坑学习python 需要装pyinstaller打包成exe
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 E:\Python>pyinstaller -F E:\Python\123.py 142 INFO: PyInstaller: 3.2.1 142 ...
webpack打包生成的map文件_从这十几个方面优化你的 Webpack 配置
目录开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度 HMR 优化代码调试 source-map HMR ❝ 概念:「HMR:」 hot module replacement ...
webpack打包生成的map文件_一站式搞明白webpack中的代码分割
上次分析到通过devtool的配置项来设置source map,在线上环境可以通过设置成cheap-module-source-map来生成单独的map文件,但是map文件在线上环境会不会每次都加载呢 ...
webpack打包优化_前端性能优化：webpack性能调优与Gzip原理
链接:https://juejin.im/book/5b936540f265da0a9624b04b 从输入 URL 到显示页面这个过程中,涉及到网络层面的,有三个主要过程: DNS 解析 TCP 连 ...

Webpack打包之坑 _ webpackChunkName【魔法注释】

事件起因

百度查阅

webpackChunkName

结束了

Webpack打包之坑 _ webpackChunkName【魔法注释】相关推荐

最新文章

热门文章