1.2.1　Webpack介绍

实现现代前端架构的转折点依赖于Webpack打包构建工具的诞生，在这之前也存在一些以JavaScript的模块化思想为主的打包构建工具，但是Webpack才是将前端架构标准化的一个里程碑，一切现代前端框架现在都依赖Webpack作为开发和构建的环境。那么什么是Webpack？Webpack图示如图1-1所示。

图1-1　Webpack图示

这张图片很详细地描述了Webpack在现今前端架构中的作用，它的任务就是将左侧复杂的文件类型和依赖关系通过小盒子加工成右侧HTML网页可以直接识别的JavaScript代码、CSS代码、图片等静态资源。

先进的Web前端项目都会运行在一个叫作脚手架的开发环境中。在开发阶段开发者可以使用浏览器不能运行的代码语法和依赖加载方式，通过Webpack来管理项目的代码和依赖包并实现模拟运行环境。这样程序员在开发前端项目时，也可以像服务器端开发的程序员一样，创建一个结构复杂的项目，使用模块化的依赖管理方式进行前端项目开发。整个开发过程都可以无HTML网页参与，Webpack负责程序的运行和解析。在程序开发完毕后通过Webpack工具，可以将程序输出成浏览器能直接识别的代码，在输出代码的过程中还可以做兼容性和安全性的补充，开发者只需维护工程化的项目代码。这种模式让前端项目从过去的杂乱无章，变成现在的结构化工程。它可以让开发者在前端开发过程中，使用更加丰富的脚本语言和模板语法，这样新时代的前端框架才有极致发挥的可能。Webpack也支持传统的静态页面开发模式，使用Webpack加工静态页面项目时，程序员依然无须考虑浏览器兼容性等问题。