这里使用了一个叫webpack-merge的包来进行两个webpack配置之间的合并，这个环节就是通过这个包将webpack.base.conf.js和webpack.dev.conf.js合并成最终的webpack配置。
(3) 配置热加载
热加载是一个非常棒的功能，这个功能启用后的效果就是：当开发环境被启动并进入调试模式后，一旦我们修改了任意地方的源代码，浏览器中对应的内容就会被自动刷新，而无须手工对浏览器进行刷新的操作，这个配置将是我们做页面布局或者功能调整时的一大臂助。
上一个环境中合并的webpack配置也是通过这个环节被动态加载的，当代码文件发生变化，热加载就会启动webpack进行重新编译，然后将最新的编译文件重新加载到浏览器中。
(4) 配置代理服务器
这个环境是为我们的代码增加一个模拟的服务端做准备，有了它的存在，我们就可以在没有后端程序支持的情况下，直接模拟远程服务器执行的一些请求的效果。例如，向服务器发出一个HTTP GET/api/books/的请求，那么我们就可以利用代理服务器将这一请求截获下来，然后返回一组这个API应该执行成功的返回结果，这样我们的前端程序运行起来的效果就与接入了服务端后的效果是一致的了。我们将这一技术称为服务模拟，在后面的学习中会具体介绍这一技术。
(5) 配置静态资源
将图片、字体、样式表和编译后的JS脚本等，生成对应的一些印记（Footprint）并存放到由开发服务器托管的一个static虚目录中，使得我们在浏览器中可以正常访问到这些资源。每个生成的文件Footprint是一些哈希代码，当文件内容发生变化时这些哈希代码就会发生改变，使用Footprint是将静态文件发布到CDN或者进行离线缓冲时通知浏览器文件是否发生改变的重要依据。
(6) 加载开发服务器
启动一个Express的Web服务器，将上述各个环境中配置好的模块进行加载，并使程序能通过浏览器进行访问。
以上就是npm run dev的完整执行思路。
● 编译生产环境
当项目准备发布时，在命令行键入：
$ npm run build
执行效果如下：
生产环境的构建过程比较简单，首先是对必要的资源文件进行打包加上FootPrint，然后是对脚本进行编译、压缩和包大小的分割。
总结
以上所述是小编给大家介绍的vue-cli的工程模板与构建工具，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: