[1] 总览

三个重要组成部分

1. cli【@vue/cli 】是一个全局安装的 npm 包，提供了终端里的 vue 命令，vue create 快速创建一个项目
2. cli服务【@vue/cli-service】 是一个开发环境依赖。提供开发时的各种配置，比如 vue-cli-serve 可以开发时运行
3. cli 插件，是向你的 Vue 项目提供可选功能的 npm 包，例如 Babel/TypeScript 转译。vue-cli-service 运行时会加载 packge.json中的所有 以 vue-cli-plugin 开头的插件。如果你想在一个已经被创建好的项目中安装一个插件，可以使用 vue add 命令。

vue-cli-service inspect 可以用来审查一个 vue-cli 项目的 webpack 配置

浏览器兼容性的：

1. 现代模式，可以根据浏览器自动的加载：vue-cli-service build --modern，Vue CLI 会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。

2. Polyfill，这也意味着如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。如果该依赖基于一个目标环境不支持的 ES 版本撰写: 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法转换和根据使用情况检测 polyfill。

   1. 也就是说依赖的某个 npm 包没有使用 babel 进行编译，最终会导致 build 之后的代码有问题，

   2. 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个transpileDependencies选项中列出来。

   3. vue-cli会去编译node-modules里面.vue文件，但不会去编译.js文件。因此vue文件不需要加babel，js文件必须加babel转译。

      下载一个包，看下这个包里面有没有babel.rc 或者.npmignore，经过babel编译，有的话工程里不需要处理。

      没有的话看下dist目录下 ，打包后的是不是有es6语法，没有的话也不需要处理，有的话需要处理。

Preload和PreFetch 这种插件都是可以去掉的

修改 webpack 配置

1. configureWebpack
2. 链式配置chainWebpack