│ ├── runner.js
│ └── specs
│ └── test.js
└── unit
├── index.js
├── karma.conf.js
└── specs
└── Hello.spec.js
这个webpack模板的结构是非常合理的，而且配置的工具也相当丰富，当投入真正的项目开发时会觉得模板的实用性很强。
所以我们很有必要花些时间将这个模板的结构以及它所提供的工具配置了解清楚，掌握Vue官方团队对项目开发的环境配置与使用思路，以便于我们能结合自己的实际情况进行适当的配置与调整。
在上文中我们已经提过src目录的用法与约定，此处就不再赘述。在项目的根目录下多了4个目录，它们的作用分别如下：
● build——存放用于编译用的webpack配置与相关的辅助工具代码；
● config——存放三大环境配置文件，用于设定环境变量和必要的路径信息；
● test——存放E2E测试与单元测试文件以及相关的配置文件；
● static——存放项目所需要的其他静态资源文件；
● dist——存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源文件夹内，该文件夹只有在运行build之后才会生成。
可见，这些目录的存在是依赖于模板内配置的开发工具的，webpack模板配置以下的工具。
3.构建工具
由于开发、测试与生产三大运行环境都需要进行构建，而且针对不同的环境要求，它的配置会有一定的区别，后面的学习中我们会对具体的配置进行一些定制与修改，我们应该清楚地了解webpack模板是如何进行构建的。
● 编译开发环境
在开发环境下通过以下指令加载运行Vue项目：
$ npm run dev这个指令的配置是在package.json的script属性中设置的，实质上它是由npm来引导执行入口程序dev-server.js完成以下的加载过程：
(1) 加载环境变量
该环节从config目录加载index.js和dev.env.js两个模块，准备开发调试环境所必需的一些目录和全局变量。
(2) 合并webpack配置
在build目录下一共有三个webpack的配置文件：
webpack.base.conf.js——公用的基本webpack配置；
webpack.dev.conf.js——开发环境专用的webpack配置项；
webpack.prod.conf.js——生产环境专用的webpack配置项。
这里使用了一个叫webpack-merge的包来进行两个webpack配置之间的合并，这个环节就是通过这个包将webpack.base.conf.js和webpack.dev.conf.js合并成最终的webpack配置。
(3) 配置热加载
热加载是一个非常棒的功能，这个功能启用后的效果就是：当开发环境被启动并进入调试模式后，一旦我们修改了任意地方的源代码，浏览器中对应的内容就会被自动刷新，而无须手工对浏览器进行刷新的操作，这个配置将是我们做页面布局或者功能调整时的一大臂助。
