1. 为前端选择合适的预处理工具和资源管理工具
预处理工具又分为 js 预处理工具和 css 预处理工具。Javascript 一直以来最为人诟病的一点就是缺乏原生的模块机制，所有 js 代码文件在被 html 页面引入后将共用同一个命名空间。所以才出现了各种“标准”尝试解决这个问题，但他们都不是原生的，需要额外的工具对代码进行特殊处理。虽然 ES6 终于引入了模块机制，但以现在的浏览器支持程度，还不足以“毫无顾虑地随拿随用”。所以 js 预处理工具最主要的工作就是帮助解决 js 的模块问题。而 css 预处理工具则很好理解，就是把 sass，less 或者 stylus 代码翻译、合并成 css 代码。
资源管理工具则是帮我们管理前端所需的各种资源文件（比如 css、js、图片、字体等等），便于我们引用。目前常用的解决方法是将他们直接编码进 js 代码中，然后像引用 js 模块一样引用它们。这可比手写各种 url 方便多了。
正如标题所说，我们将采用 Webpack，因为它具备上面所说的所有功能。此外还支持代码热替换，使修改代码后不用刷新页面也能在浏览器中立即看到效果。
2. 为后端选择合适的预处理工具
后端面对的都是 js 代码，不需要前端那样的资源管理工具，另外， Node 强迫你使用至少一种模块管理方案（CommonJS 或 ES6 的 import），也不用考虑代码的依赖问题。
所以后端要简单许多，唯一需要考虑的基本上就剩下如何将 ES6 转译成 ES5 了（如果你打算使用 ES6 的话）。目前常用的做法是使用 Babel，你可以用 Babel 命令行工具独立执行编译过程，也可以配置 Babel register 实现代码运行时动态翻译，这对于开发场景而言无疑是最方便的。所以我们选择后一种方式。
3. 为整个项目选择合适的流程控制工具
流程控制工具是为了帮助我们管理诸如代码检查、编译、压缩、移动、部署这些任务的，原本我们是通过手敲命令（或者高级一点写个脚本）的方式做，有了流程控制工具以后，只需要提供配置文件和少量代码就可以完成。
目前最流行的解决方案是 gulp。不过，由于我们这里要搭建的是开发环境，没有移动代码、压缩、部署等需求，所以不需要功能强大的 gulp。我们只要用 nodemon 这个工具监听代码变动然后适时重启 server就够了。
正式开始搭建
1. 利用 Express 脚手架快速搭建应用
使用 Express 提供的脚手架工具（Express application generator）可以在 1s 之内搭建出最基本的应用。
如果你以前还没试过，首先执行下面的命令安装
npm install express-generator -g
然后执行以下命令生成代码，命令执行过程中需要输入一些参数。
express <myapp>
完成后的文件结构是这样的
. ├── app.js ├── bin │ └── www ├── package.json ├── public │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes │ ├── index.js │ └── users.js └── views ├── error.jade ├── index.jade └── layout.jade
但是这个文件结构只是后端代码，要想跟前端代码相结合，需要做一些改动。我们计划最终的文件结构应该是这样的
. ├── src │ ├── client │ └── server └── ...
所以需要将上面自动生成的 Express 代码放到 /src/server/ 路径下。
接下来我们要删除一些用不着的东西以及增加一些缺失的东西。
首先，由于我们打算在前端使用 Vue 框架，并由 Vue-Router 管理大部分路由，后端 Express 仅保留少量的 RESTful API 路由，所以后端不需要复杂的路由设置，那么 routes 文件夹下的内容可以简化成一个 routers.js 文件。
然后，我们需要配置好 Babel register，所以需要在项目跟路径下新增两个文件 .babelrc 和 index.js，内容分别为：
/.babelrc
{ "presets": ["es2015"], }
.babelrc 是 Babel 6.0 必须的文件
/.index.js
require('babel-register') require('./src/server')
上面两句完成 Bebel 注册，它会爬取所有 require 或 import 方式依赖的模块并把它们翻译成 ES5。
自动生成的代码里有个 www 文件，他是 Express 应用的入口文件，我们把它放在 server 路径下并改名为 index.js 以便让上面配置的 Babel register 能正确找到它。