1.2.2　Vue.js、前端工程化和Webpack

前端工程化这个词相信读者并不陌生，在早期的Web应用中，前端开发顶多是写写HTML代码，实现页面的布局，最后交给后端工程师，甚至有些业务都是由后端工程师一肩挑，但随着业务和复杂性、技术的发展，前端已经不是简单地写页面和样式了，而是包括一系列可以流程化和规范化的能力，称作前端工程化，这主要包括以下几个部分：

·　静态资源和动态资源的处理。

·　代码的预编译。

·　前端的单元测试和自动化测试。

·　开发调试工具。

·　前端项目的部署。

随着前端工程化的不断流行，仅仅靠手工来完成这些操作显得效率很低，前端迫切需要一款支持上面几个部分功能的工具，随后便出现了诸如Webpack或Browserify (5)模块的打包工具。越来越多的前端框架需要结合模块打包工具一起使用，Vue.js也不例外，目前和Vue.js结合使用最多的模块打包工具非Webpack莫属。

Webpack的主要功能是将前端工程所需要的静态资源文件（例如CSS、JavaScript、图片等）打包成一个或者若干个JavaScript文件或CSS文件，如图1-2所示。同时提供了模块化方案来解决Vue组件之间的导入问题。本书后续的第8章会用到它，但是由于篇幅有限，本书并不会对Webpack进行详细的讲解，读者如果想了解更多有关Webpack的内容，可以到官网上去查阅，网址为https://webpack.js.org/。

图1-2　Webpack