Vue-cli项目构建
开发vue项目的时候，大部分人都是使用 vue-cli脚手架生成的项目架构，然后 npm install 安装依赖，npm run dev启动项目然后就开始写业务代码了。
但是对项目里的 webpack封装和配置了解的不清楚，容易导致出问题不知如何解决，或者不会通过 webpack去扩展新功能。
Vue-cli项目配置
使用vue-cli生成的项目，是因为vue-cli 配置了一些基本的功能，具体如下：
- ES6代码转换成ES5代码
- scss/sass/less/stylus转css
- vue文件转换成js文件
- 使用 jpg、png，font等资源文件
- 自动添加css各浏览器产商的前缀
- 代码热更新(热更新就是应用里面某些模块和页面是用h5 js 来写的，就和网页一样，代码都在服务器上，更新只需要更改服务器上的代码就可以了)
- 资源预加载
- 每次构建代码清除之前生成的代码
- 定义环境变量
- 区分开发环境打包跟生产环境打包
- …
搭建webpack基本环境
简单的说，webpack是一个模块打包机，可以分析你的项目依赖的模块以及一些浏览器不能直接运行的语言jsx、vue等转换成 js、css文件等，供浏览器使用。
- 初始化项目
在命令行中执行 npm init然后一路回车就行了，主要是生成一些项目基本信息。最后会生成一个package.json 文件
npm init
- 安装
webpack
- 测试
webpack是否安装成功
新建一个src文件夹，然后再建一个main.js文件
// src/main.js
console.log('hello webpack')
然后在package.json下面加一个脚本命令
然后运行该命令
npm run serve
如果在 dist目录下生成了一个main.js文件，则表示webpack工作正常
具体webpack配置可以参见webpack具体配置说明