§ 配置

本项目整体采用 Webpack 构建，使用 ESLint 对代码进行静态检测，使用 Babel 转译 ES6
Gulp 仅用于合并压缩打包静态基页（src/index.html）中 build 标签内全局引入的静态资源

⊙ Webpack

本文档不打算照搬 Webpack 官方文档，仅列出较为重要的部分
特别提醒：开发过程中，改动 build/ 目录下的配置，都需要重启才能生效
（您也可以使用 Nodemon、Supervisor 等工具进行自动监控重启）

1. 框架 / 类库 单独分离打包

见 build/webpack.base.conf.js 中的 entry.vendor

当然，您也可以自行配置 DllPlugin 以实现真正的分离打包

实际上该步骤可通过读取 package.json 的 dependencies 字段实现自动化，但其灵活度不够高，必要性也不大
（例如，我们仅使用了 lodash 的某几个函数，就没必要将整个 lodash 打包进来）

对此我们还有别的替代方案：split-by-name-webpack-plugin、webpack-split-by-path
本项目不引入上述插件主要是考虑到非官方、维护不稳定等因素

参考 Webpack 2.x 的 Code Splitting， 已实现 框架 / 类库 自动打包成 vendor.js
详见 build/webpack.base.conf.js 中的 CommonsChunkPlugin 配置

2. 路径别名

源码目录位置可简写为 @，见 build/webpack.base.conf.js 中的 resolve.alias

路径别名的好处是显而易见的

例如，在某组件中，引入 authService 需要 import authService from '../../../services/authService'
但有了路径别名后，只需要 import authService from '@/services/authService'
相比于 AngularJS 中的依赖注入，这种方式依赖于构建工具，显得更为简单

您可能会说，Webpack 只需要设定了 resolve.root 为 src/
就可以直接 import authService from 'services/authService'
但在这里其实是会引起歧义的
试问：import createBrowserHistory from 'history/lib/createBrowserHistory'
您可能会觉得这是 src/history/lib/createBrowserHistory.js
但实际上 history 是一个 npm package
同样地，您又怎么知道 services 不是一个 npm package？
综上，引入路径别名可以满足简约与避免歧义的需求

3. 环境变量

由 build/webpack.dev.conf.js 中的 DefinePlugin 提供

默认有这些全局变量： process.env.NODE_ENV、__ENV__、__DEV__ 与 __PROD__ （后三者在 build/config/ENV.js 中定义）
若要继续添加，则还需要在 .eslintrc 中 globals 同步写入
由此即可根据当前运行环境执行对应的代码：

if (__DEV__) {
  // 开发环境下执行的代码
}
if (__PROD__) {
  // 生产环境下执行的代码
}

在此需要提醒，在 npm scripts 中设置 NODE_ENV 要注意末尾空格的问题
使用前最好先 trim 一下：process.env.NODE_ENV.trim()

拓展阅读：解读 UglifyJS，里面介绍了 UglifyJS 会如何处理这些环境变量

⊙ ESLint

配置文件见项目根目录下的 .eslintrc，对其的任何修改都是立即生效
配置规则请参考 docs·rules（请注意当前版本为 1.x）

温馨提示：build/webpack.base.conf.js 中的 eslint-friendly-formatter，使得点击命令行中的报错后可以直接跳到目标位置

⊙ Babel

配置文件见项目根目录下的 .babelrc
配置详情请自行参考 docs·babelrc

⊙ Gulp

完全参考知友 @游志军 的回答