vue-cli3的配置,全部放在了vue.config.js这一个文件中,讲道理,真的清爽。
作为技术小菜鸟,还没有手动从0到1配置过webpack,只是对webpack配置工程师。。略有耳闻。。
据说webpack4简单了许多,赶上了好时代,小菜鸟总归也想起飞,之后透彻学习一下。
配置vue-cli3项目,可以说是all in vue.config.js的。
当然,封装、就一定会留个口给用户,去对底层进行自定义操作。
vue.config.js的配置项中,有两个口,configureWebpack和chainWebpack。
本文只简单介绍,chainWebpack的使用方式。
废话了这么多,重点hin少,全在下面👇
1.基本使用文档,见官网
https://cli.vuejs.org/zh/guide/webpack.html#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C-%E9%AB%98%E7%BA%A7
2.实操
官网例子比较简单,使用中,涉及到具体的更改,发现照葫芦画瓢,还是有点画不出来。。
比如我想要修改loader选项,看到了官网的
于是抄下来,config.module.rule()
我应该给rule里面,传什么??
重点来了
(1)控制台:vue inspect > output.js 拿到解析好的 webpack 配置。
(2)打开output.js
(3)比如,这里我是想要修改url-loader的行为,于是在output.js中搜索url-loader
好了,全文就这么两个框是重点。这下知道给rule传什么,给use、loader传什么了😂
照着官网的葫芦,画完瓢,console一下tap里那个options,发现就是图二里外层的那个options,随心修改完,return回去,大功告成。
#后记:
小笔记,准备发布,就注意了一下措辞和排版,哈哈。
自己摸索配置过程中的困惑和发现,希望对你有帮助~
btw,不能忽视这低调的注释啊😂