接前文,下面开始进入静态资源的合并与压缩中的第项:CSS文件的合并与压缩。
预备在前文的基础上,准备以下文件和目录
--demo
--src
--single1.js
--single.js
--single1.css
--single.css
`--body.png`--index.html
single1.css的内容为
html{ margin:0; padding:0;}
single.css的内容为
body{ background:url("./body.png");}
index.html内容为
!DOCTYPEhtml!--coolie--linkrel="stylesheet"type="text/css"href="./src/single1.css"linkrel="stylesheet"type="text/css"href="./src/single.css"!--/coolie--!--coolie--scriptsrc="./src/single1.js"/scriptscriptsrc="./src/single.js"/script!--/coolie--webpack
无法直接做到。
coolie无须修改配置,直接用前一篇文章的配置文件。
执行cooliebuild之后,index.html(为了便于阅读,已经加了断行)为:
!DOCTYPEhtmllinkrel="stylesheet"href="/src/bdd8e0cef06ddaabac0b79.css"scriptsrc="/src/6c76d4e4b7d1ebc1abd65b9.js"/script!--coolie
0.0.10--来看下构建之后的bdd8e0cef06ddaabac0b79.css文件:
/*coolie
0.0.10*/html{margin:0;padding:0}body{background:url(a81bd97bfe6ed1db6e84eb.png)}聪明的coolie也将css引用的图片进行版本管理了,看下relationship-map.json:
{"index.html":{"css":{"src/bdd8e0cef06ddaabac0b79.css":["src/single1.css","src/single.css"]},"js":{"src/6c76d4e4b7d1ebc1abd65b9.js":["src/single1.js","src/single.js"]},"main":""}}
此时的目录结构为:
--dest
--src
--bdd8e0cef06ddaabac0b79.css
--6c76d4e4b7d1ebc1abd65b9.js
`--a81bd97bfe6ed1db6e84eb.png
--index.html`--relationship-map.json
一张图说明一切
总结webpack优点没有缺点无法实现coolie优点不需要修改配置只需要在页面上添加引用完美实现了样式的合并与压缩同时处理了样式中引用的图片同时对css和图片进行了版本管理同时修改了html文件的引用缺点无综,coolie完美的实现了要求,做的非常漂亮,得满分10分,webpack无法直接做到,得0分。