vue-cli是什么?和Vue、webpack什么关系？

Vue是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。

Vue CLI = Vue + 一堆的js插件。

Vue CLI是一个Vue.js官方的脚手架命令行工具，通俗点说就是代码生成器，可以快速生成一套基于Vue完整的前端框架，单独编译，单独部署。

我们可以用vue-cli快速搭建Vue.js项目，vue-cli最主要的功能就是初始化项目，既可以使用官方模板，也可以使用自定义模板生成项目，而且从2.8.0版本开始，vue-cli新增了build命令，能让你零配置启动一个Vue.js应用。

当你安装好node环境以及vue-cli后，通过 ‘vue init 模板名项目名’，然后回答部分基本问题后就能快速建立起工程项目：

前端资源模块化管理和打包工具，它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源，还可以将按需加载的模块进行代码分割，等到实际需要的时候再异步加载（如图）。而要它自动实现这些功能，你得提前编辑好配置文件。

vue-cli 里面包含了webpack，并且配置好了基本的webpack打包规则。

但是用vue-cli建立出来的项目根目录并没有webpack.config.js文件，也找不到相关引用。

其实vue-cli中的webpack有个默认配置，如下访问：

<projectRoot>/node_modules/@vue/cli-service/webpack.config.js

该文件会动态解析并输出 vue-cli-service 命令中使用的相同的 webpack 配置，包括那些来自插件甚至是你自定义的配置。

调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象：

// vue.config.js 
module.exports = { 
  configureWebpack: { 
    plugins: [ new MyAwesomeWebpackPlugin() ] 
  } 
}

该对象将会被 webpack-merge 合并入最终的 webpack 配置。