JavaScript的模块化开发到如今，已经相当成熟了，当然，一个应用包含的不仅仅有js，还有html模板和css文件。
那么，如何将html和css也一起打包，来减少没必要的HTTP请求数呢？
本文将和大家一起分享两个requrejs插件：text和css
1. html模板与text插件
我们在开发一个widget时，如果将html模板直接写在js文件中，将会很难维护，处理各种换行以及双引号就会让人抓狂，对于后续维护的人来说也是噩梦。
个人比较推荐的做法是将widget的html模板提取到一个独立的文件中，减少html与js的耦合，同时方便维护与管理。
那么，widget内部如何获取这个独立的html模板文件呢？如果直接在widget内部通过ajax加载，势必增加后续的维护成本。
这时text插件就上场了！
我们可以像这么做:
define([ "text!./templates/login.html"//指向当前组件依赖的模板文件 ],function(template /*html模板字符串*/){ //do something //declare widget });
当应用上线之前，我们需要打包这些widget，而text插件会将widget依赖的模板文件一并打包进去，模板文件将做为一个独立的字符串模块存在。
这样一来，我们就达到了两个目的：1.将html模板与js文件解耦 2.减少HTTP请求数
2. css文件与css插件
大部分widget都会有自己的样式，就像jquery-ui那样，每一个ui组件都有自己的样式文件。
某些情况下，我们希望css文件与js打包在一起加载，而不需要去html/head添加各种css文件引用，当使用的时候，我们只需要require这个widget就好。
这时，css插件就上场了。
define([ "css!./css/login.css" ],function(){ //这个时候，css文件已经被append到html/head中了，也就是说，你的widget依赖的样式已经就绪 //declare widget });
当我们打包这些widget的时候，css插件会将widget依赖的模板文件一并打包进去，同时可以自动优化css，比如去除空格，合并重复样式等等。
这样一来，我们就达到了两个目的：1.自动加载css依赖 2.减少HTTP请求数
当然，text插件和css插件在打包时，还有很多参数可以配置，大家有兴趣的可以点击链接到Github去查看。
PS: 尊重他人原创，转载请务必注明来自http://www.cnblogs.com/Raoh/p/4204228.html