webpack 合并压缩_文章 - coolie PK webpack 之二：CSS 文件的合并与压缩 - FED社区

接前文，下面开始进入静态资源的合并与压缩中的第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 内容为

webpack

无法直接做到。

coolie

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

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

来看下构建之后的 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 分。