前端构建

Q：一句话解释为什么要前端构建？
A：因为前端资源都存放在远程服务器上。

1构建哪些资源

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

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

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

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

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

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

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

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

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