vue-cli3 chainWebpack如何修改webpack内部配置

Posted 2023-03-09

参考技术A vue-cli3的配置，全部放在了vue.config.js这一个文件中，讲道理，真的清爽。

作为技术小菜鸟，还没有手动从0到1配置过webpack，只是对webpack配置工程师。。略有耳闻。。

据说webpack4简单了许多，赶上了好时代，小菜鸟总归也想起飞，之后透彻学习一下。

配置vue-cli3项目，可以说是all in vue.config.js的。

当然，封装、就一定会留个口给用户，去对底层进行自定义操作。

vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。

本文只简单介绍，chainWebpack的使用方式。

废话了这么多，重点hin少，全在下面👇

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

官网例子比较简单，使用中，涉及到具体的更改，发现照葫芦画瓢，还是有点画不出来。。

比如我想要修改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，不能忽视这低调的注释啊😂