Q：一句话解释为什么要前端构建？

A：因为前端资源都存放在远程服务器上。

构建哪些资源

• JS 内容（包括<script/>直接引入的 JS 和 JS 模块）：压缩、合并、版本管理。
• CSS 内容（包括<link/>直接引入的 CSS 和 JS 模块引入的 CSS 模块）：压缩、合并、版本管理。
• HTML 内容（包括 HTML 模板文件和 JS 模块引入的 HTML 模块）：压缩。
• 资源文件（如 CSS 引用的图片、字体等，JS 模块引用的图片等，以及 HTML 文件里资源标签（如<img/>、<video/>等）引用的图片等）：压缩、版本管理、替换源引用。

如何构建

目前，coolie-cli 按照以下六个步骤来进行。

1、分析配置文件

coolie-cli 会分析指定目录下的coolie.config.js配置文件。 分析出哪些 HTML 需要构建，哪些入口模块需要构建，以及 JS、CSS、资源文件的存放目录等等。 配置文件基本是与工程的大小无关的，因为路径是支持 glob 格式的。

2、复制文件

重写原样复制一些不需要构建的文件（可配置），如 robots.txt、favicon.ico 等。

3、构建入口文件

分析入口模块，以及异步模块，然后依次分析各个需要构建的模块以及依赖模块，缓存在内存内。 在遇到 html、css、image 模块，则需要进行额外处理，经过模块管道处理，生成目标模块。 最后按照分块规则，将分析后的模块进行依次分块保存。

4、重写 coolie-config.js

写入配置的文件主要是异步模块和分块模块的版本号，因为异步模块和分块模块都是用 ID 来表示的。

5、构建 html

接下来就是构建 html，依次分析 html 里的资源标签和合并标记（即：<!--coolie--><!--/coolie-->）， 找出引用资源，然后进行压缩、合并、版本管理，并且替换在 html 里的引用路径。

6、生成 coolie-map.json

根据以上五步，构建工具已经静态分析出整个工程引用了哪些资源，以及资源之前的裙带关系（依赖关系）。

构建不仅仅是一个优化过程，更是一个静态检查过程，可以帮我们发现引用了哪些坏链的资源。