本文目录
在vue-cli3.0中配置webpack
在vue-cli3.0中，对各种配置文件进行了合并，若要进行webpack相关配置，需要在项目根目录下新建vue.config.js文件 在 vue.config.js 中的 configureWebpack 选项提供一个对象： 提示：有些webpack设置选项是基于vue项目设置的，为了保证vue可以正常工作，某些webpack的配置需要遵从vue提供的配置选项，例如 如果你熟悉webpack，你已经可以开始配置项目了 扩展：链式操作---jquery那般的链式书写方式 ***隐藏网址***
vue-cli3 chainWebpack如何修改webpack内部配置
vue-cli3的配置，全部放在了vue.config.js这一个文件中，讲道理，真的清爽。 作为技术小菜鸟，还没有手动从0到1配置过webpack，只是对webpack配置工程师。。略有耳闻。。 据说webpack4简单了许多，赶上了好时代，小菜鸟总归也想起飞，之后透彻学习一下。配置vue-cli3项目，可以说是all in vue.config.js的。 当然，封装、就一定会留个口给用户，去对底层进行自定义操作。 vue.config.js的配置项中，有两个口，configureWebpack和chainWebpack。 本文只简单介绍，chainWebpack的使用方式。废话了这么多，重点hin少，全在下面 ***隐藏网址***官网例子比较简单，使用中，涉及到具体的更改，发现照葫芦画瓢，还是有点画不出来。。 比如我想要修改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，不能忽视这低调的注释啊
Vue项目优化
babel.config.js
通过if条件判断，只有在 production 阶段插件才会生效
通过命令行方式
通过可视化UI面板
运行 vue ui -》任务-》 build 完成-》分析
默认情况下，Vue项目的开发模式和发布模式共用同一个打包入口文件，即为 src/main.js 。为了将项目的开发过程和发布过程分离，可以指定两种打包入口
开发模式为 src/main-dev.js
发布模式为 src/main-prod.js
两中修改webpack配置的方式 configureWebpack 和 chainWebpack ，两者功能相同，只是使用方式不同，
vue.config.js
默认情况下，import导入的第三方依赖会被打包进同一个文件，造成文件体积过大进而影响加载速度。通过配置 externals 结点将需要全局导入的第三方依赖排除在打包文件外，可以有效减少打包体积
声明方式为 依赖包名: 注册名称 。其中注册名称必须和引入CDN资源之后的挂载在 window 上的对象名字一致，可以使用 console.log(window) 打印这个对象的名称。如果注册名称所指定的对象在window上找不到，将导致白屏。此外，如果引入的CDN资源在window上的挂载的对象名类似 xx-xx-xx (不符合js对象命名规范)，这种资源不能通过CDN导入，只能用Import方式。
vue.config.js
config.plugin(’html’) 使用 html 插件向模板中传递参数
css
js
如果 isProd 为true，CDN资源才会被导入
只有在访问到该路由时对应的资源文件才会被加载，建议不要将每个路由单独打包，而是通过 webpackChunkName 为多个路由指定同一个打包文件，这样可以减少请求的次数
router/index.js
完整配置
vue.config.js
main-prod.js
引入CDN后，将导入样式的语句注释或者删除，只保留导入JS的语句。
