github地址：https://github.com/zdliuccit/...欢迎star这个构建适合PC端开发，也可以通过配置支持移动端开发。Update...技术栈Webpack3Koa2AxiosVue2&vue-routerBabelEs6/7Eslintstyluspostcss$npmi安装npm包$npmstart启动项目注：本次构建使用的npm包说明请参考doc目录下的npm包说明。md文件目录结构webpack3$npmiwebpack-Dwebpack配置项主要有以下几点：entry：入口，String||Array||Objectoutput：exit，定义了打包输出文件；包括路径，文件名，可能还有运行时访问路径（publicPath）参数主要是定义一些loader，定义哪些后缀文件应该使用哪个loadertest：检测哪些文件需要这个loader，是正则表达式exclude：忽略哪些文件resolve：定义可以打包的文件，文件后缀名plugins：定义一些额外的plugins...webpack配置文件基础配置webpack.config.base开发配置webpack.config.dev.js生产配置webpack.config.prod.jsWebpack配置可以参考官方或Webpack中文文档Koa2koa的中间件由生成器组成。从第一个中间件开始执行，遇到next就进入下一个中间件，一直执行到最后一个中间件。倒序，next执行前一个中间件之后的代码，直到第一个中间件执行响应结束才发送出去。这里Koa2的中间件必须使用ES7语法async/awaitKoa2来替代webpack-dev-server作为打包服务的部署方案。代码如下：constapp=newKoa()consturi='http://'+currentIP+':'+appConfig.appPortconstdevMiddleware=webpackDevMiddleware(clientCompiler,{publicPath:config.output.publicPath,headers:{'Access-Control-Allow-Origin':'*'},stats:{colors:true,},noInfo:false,watchOptions:{aggregateTimeout:300,poll:true},})//中间件，一组asyncfunctions,generatorfunctionsneedconvertconversionconstmiddleWares=[//loggingloggerMiddleware,//压缩响应require('koa-compress')(),//错误处理errorMiddleware,//webpack开发中间件convert(devMiddleware),//webpack热替换中间件convert(webpackHotMiddleware(clientCompiler)),//手动设置cookie方法setCookieMiddleware,//http中间件httpMiddleware(),//插入自定义中间件...appConfig.middleWares,//routeKoaRouter.middleware(),//代理中间件proxyMiddleware(),]middleWares.forEach((middleware)=>{if(!middleware){return}app.use(middleware)})console.log('>Startingdevserver...')devMiddleware.waitUntilValid(()=>{console.log('>Listeningat'+uri+'\n')opn(uri)})//错误处理app.on('error',(err)=>{console.error('服务器错误:\n%s\n%s',err.stack||'')})constserver=app.listen(appConfig.appPort)process.on('SIGTERM',()=>{console.log('Stoppingdevserver')devMiddleware.close()server.close(()=>{process.exit(0)})})BabelEs6/7babel-corebabel-preset-es2015packsthefeaturesofes6babel-preset-latestlatest是一个特殊的presets，包括es2015,es2016,es2017插件（目前es2018以后也会包含），总是包含最新编译的插件-插件。babel-preset-env推荐使用babel-preset-env。其他模式会将一些浏览器支持的es6/7新特性转换成ES5代码，有点浪费。Axios是一个基于Promise的HTTP请求客户端，可以在浏览器和node.js中使用。浏览器支持使用HTTP请求。在vue组件中使用：this.http.get(url,options)this.http.delete(url,options)this.http.post(url,data,options)this.http.put(url,data,options)在非vue组件中使用：importhttpfrom'@config/utils/http'http.get(url,options)http.delete(url,options)http.post(url,data,options)http.put(url,data,options)对于post和put方法，必须提供第二个data参数，即空对象，如：this.http.post(url,{})使用ESlint进行代码检查特点：默认rules包含了JSLint和JSHint中存在的所有规则，easymigration规则高度可配置：可以设置“warning”和“error”两种错误级别，或者直接禁用.eslintrc.js配置文件的通用格式{root:true,parserOptions:{//EsLint允许通过parserOptions指定ecma的版本进行校验，ecmaVersion的一些特性:6,//指定ECMAScript支持的版本，6为ES6sourceType:'module',//指定的类型源，有两个“脚本”或“模块”ecmaFeatures:{//ecmaFeatures指定你想使用哪些额外的语言特性experimentalObjectRestSpread:true,}},parser:'babel-eslint',//EsLint使用esprima进行脚本解析默认，也可以切换成babel-eslint解析env:{//Environment可以预置其他环境的全局变量，比如brower、node环境变量、es6环境变量、mocha环境变量等browser:true,node:true,es6:true,mocha:true},plugins:[//EsLint允许第三方插件'html','import','promise',],extends:'standard',//extends是EsLint默认推荐的验证方式。您可以使用配置来选择您需要的验证。rules:[//自定义规则],globals:{//插件在执行过程中使用的其他全局变量}}app.config.jsmodule.exports={//主服务启动端口appPort:serverConfig.appPort,//Proxy配置，可以支持多个代理，关键是前缀。命中后去掉前缀转发给代理服务器proxy:serverConfig.proxy,//webpack服务端口,webpackDevServerPort:9002,//webpack差分配置webpack:{entry:{app:path.join(__dirname,'client/index.js'),//entryvendor:['vue','vue-router','vue-template-compiler']//拆分框架代码},//样式是否开启px到rem转换,配合config/utils/responsive-design.js适合移动端开发,默认不开启csspostcsspostcss:[],},//自定义中间件asyncawait函数写法middleWares:[]}配置tasks/commandnpmstart:开发模式启动servernpmrunbuild:打包生产模式的代码，继续完善。...
