接前文，下面开始进入静态资源的合并与压缩中的第2项：CSS 文件的合并与压缩。

预备

在前文的基础上，准备以下文件和目录

|-- demo
|-- src
|	|-- single1.js
|	|-- single2.js
|	|-- single1.css
|	|-- single2.css
|	`-- body.png
`-- index.html

single1.css 的内容为

html {
	margin: 0;
	padding: 0;
}

single2.css 的内容为

body {
	background: url("./body.png");
}

index.html 内容为

<!DOCTYPE html>

<!-- coolie -->
<link rel="stylesheet" type="text/css" href="./src/single1.css">
<link rel="stylesheet" type="text/css" href="./src/single2.css">
<!-- /coolie -->

<!-- coolie -->
<script src="./src/single1.js"></script>
<script src="./src/single2.js"></script>
<!-- /coolie -->

webpack

无法直接做到。

coolie

无须修改配置，直接用前一篇文章的配置文件。

执行coolie build之后，index.html（为了便于阅读，已经加了断行）为：

<!DOCTYPE html>
<link rel="stylesheet" href="/src/bdd8e022ce7470f06d7183daabac0b79.css">
<script src="/src/6c762d4e4b7d1e9504281bc12abd65b9.js"></script>
<!--coolie@0.20.10-->

来看下构建之后的 bdd8e022ce7470f06d7183daabac0b79.css 文件：

/*coolie@0.20.10*/
html{margin:0;padding:0}
body{background:url(a821bd973bf1114e6ed1d9170b6e84eb.png)}

聪明的 coolie 也将 css 引用的图片进行版本管理了，看下relationship-map.json：

{
    "index.html": {
        "css": {
            "src/bdd8e022ce7470f06d7183daabac0b79.css": [
                "src/single1.css",
                "src/single2.css"
            ]
        },
        "js": {
            "src/6c762d4e4b7d1e9504281bc12abd65b9.js": [
                "src/single1.js",
                "src/single2.js"
            ]
        },
        "main": ""
    }
}

此时的目录结构为：

|-- dest
|-- src
|	|-- bdd8e022ce7470f06d7183daabac0b79.css
|	|-- 6c762d4e4b7d1e9504281bc12abd65b9.js
|	`-- a821bd973bf1114e6ed1d9170b6e84eb.png
|-- index.html
`-- relationship-map.json

一张图说明一切

总结

webpack

优点
- 没有
缺点
- 无法实现

coolie

优点
- 不需要修改配置
- 只需要在页面上添加引用
- 完美实现了样式的合并与压缩
- 同时处理了样式中引用的图片
- 同时对 css 和图片进行了版本管理
- 同时修改了 html 文件的引用
缺点
- 无

综，coolie 完美的实现了要求，做的非常漂亮，得满分 10 分，webpack 无法直接做到，得 0 分。

FED

coolie PK webpack 之二：CSS 文件的合并与压缩

预备

webpack

coolie

总结

webpack

coolie