vue-cli3的一点研究
# vue-cli3的一点研究
用了vue-cli3有一段时间了,对这东西的感情也颇为深厚,它帮我解决了无数次配置webpack的烦恼(妈妈再也不用担心我不会配webpack了hhh),无数次项目构建,也陪伴我从前端小白,到达前端菜鸡的整个旅程。
曾经在我刚刚学会配置webpack时,我就有一个小小的目标,就是看看vue-cli到底是怎么配置webpack的,经过一番研究,发现我并没有找到什么有用的信息(只能说我太菜了),计划就被搁置下来。
直到,,,昨天晚上我想在vue里使用three.js,我认识three.js已经有一段时间了,奈何迟迟没有入坑,想借着做个人网站逼自己一把,但是查了一些资料后,我发现事情没有这么简单,vue-cli配置的file-loader只有视频(mp4\webm\ogg\mp3\wav\flac\aac)和图片(jpg\jpeg\png\webp\gif)文件。
于是我去不靠谱的百度上找资料
路人A:把他丢到public下(可以,但是不够优雅)
路人B:用xxxxx库(可以,但是没有必要)
以我对webpack的理解,反正他就是个文件,文件使用import进去之后就是个字符串了,只是需要用file-loader处理一下,于是我决定,我要改vue的webpack
其实大多数老油条都知道vue.config.js
这个文件,经常用他改webpack-dev-server的配置、项目发布路径之类的,也会直接覆盖webpack,但是,直接覆盖rules也不是个优雅的解决方案,资料查着查着我突然看到了一个vue社区里讨论指向的文档内容https://cli.vuejs.org/zh/guide/webpack.html,这,正是我想要的!
于是我又一次打开了源码、对照文档理解,稍作总结可以有以下几点
vue inspect > [name].js 会把当前的webpack配置结果输出到js文件里
vue-cli使用了 webpack-merge webpack-chain 来辅助webpack配置,我们也可以同样去优雅的修改webpack,就像官方源码这样。
经过几次尝试后,我的vue.config.js被我改成了这样
module.exports = {
chainWebpack: config => {
config.module
.rule("model")
.test(/(\.glb|\.obj|\.mtl)$/)
.use("file-loader")
.loader("file-loader")
.options({
name: `model/[name].[hash:8].[ext]`
})
}
}
嗯,很符合我对代码的审美要求,非常优雅,输出结果到output.js,文件上追加了这样一段,嗯,基本符合要求,搞定!
/* config.module.rule('model') */
{
test: /(\.glb|\.obj|\.mtl)$/,
use: [
/* config.module.rule('model').use('file-loader') */
{
loader: 'file-loader',
options: {
name: 'model/[namea].[hash:8].[ext]'
}
}
]
}
代码中使用import xxx from "@/assets/xxx.glb"
并输出,输出结果/model/xxx.glb