vue-cli的webpack模版，相关配置文件dev-server.js与webpack.config.js配置解析

1.下载vue-cli

npm install vue-cli -g

vue-cli的使用与详细介绍，可以到github上获取https://github.com/vuejs/vue-cli

2.安装webpack项目模版

vue init <template-name> <project-name>

比如：

vue init webpack my-project

之后可以在当前目录下下载该模版，然后

npm install

安装所有的依赖包，可以得到如下的目录结构

3.目录结构与文件配置说明

首先对目录结构进行说明，

1.build目录，主要利用webpack与node插件启动一些相关服务的js文件

2.config目录主要是针对开发环境，生产环境，测试环境的配置信息

3.src是我们自己开发时的源码目录（可指定修改名称）

4.static是一些第三方库的包用到的静态资源目录（可指定修改名称）

说明每个文件：

主要入口文件，dev-server.js文件，几乎每一句话都进行了注释，有些地方，涉及了其他关联文件，下面也会有相应的注释的方式

// 引入检查版本js模块
require('./check-versions')()
// 引入配置文件信息模块
var config = require('../config')
// 判断开发环境
if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
// 引入nodejs的path模块，进行一些路径的操作，详情可以查看node官方的api
var path = require('path')
// 引入nodejs的一个框架express,可以帮助我们快速搭建一个node服务 github https://github.com/expressjs/express
var express = require('express')
// 引入node为webpack提供的一个模块服务 github https://github.com/webpack/webpack
var webpack = require('webpack')
// 可以指定打开指定的url使用指定的浏览器或者应用，详情可以去看一下github https://github.com/sindresorhus/opn
var opn = require('opn')
// 一个可以设置帮助我们进行服务器转发代理的中间件 https://github.com/chimurai/http-proxy-middleware
var proxyMiddleware = require('http-proxy-middleware')
// 根据当前启动环境选择加载