17. 利用webpack来拆分css

解决css文件细分问题

要拆分css,就必须吧css当成像js那样的模块,要把css当成模块,就必须要有一个构建工具(wepack),它具备合并代码的能力

而webpack本身只能读取css的文件内容,并将其当做js代码进行分析,因此,会导致错误,于是,就必须有一个loader,将css转换为js代码

css-loader

css-loader的作用,就是将css代码,转换为js代码
它的原理极其简单,将css代码作为字符串导出

例如:

.red{
  color:"#f40"
}

经过css-loader转换后变成js代码

module.exports='
.red{color:"#f40"}
'

上面的js代码经过简化后的,不代表真是的css-loader的转换后的代码,css-loader转换后的代码更加复杂,同时会导出更多的信息,但是核心的思想不变

再例如:

.red{
  color:"#f40",
  background:url("./bg.png")
}

经过css-loader后转换为变成js代码

var import1=require("./bg.png");
module.exports='.red
{
  color:"#f40",
   background:url("${import1}")
}
'

这样一来,讲过webpack后续处理,会把依赖的./bg.png添加到模块的列表中,然后将代码转换为

var import1=__webpack_require("./src/bgc.png");
module.exports='.red
{
  color:"#f40",
    background:url("import1")
}
'

再例如

@import "./reset.css"
.red
{
  color:"#f40",
   background:url("./b.png")
}

会转换为:

var import1=require('./reset.css');
var import2=require('./bg.png');
module.exports=`${import1}
.red{
    color:"#40",
  background:url("${import2}")
}
`

总结,css-loader干了什么

1. 将css文件内容作为字符串导出
2. 将css中的其他依赖作为require导入,以便webpack分析依赖

style-loader

由于css-loader仅提供了将css转换字符串的能力,剩余的事情要交给其他的loader或者plugin来处理

style-loader可以将css-loader转换后的代码进一步处理,将css-loader导出的字符串加入到页面的style元素中去

例如

.red{
  color:"#f40"
}

经过css-loader转换后

module.exports=`.red{color:"#f40"}`

经过style-loader转换成

module.exports=`.red{
 color:"#f40"
}
`
var style=module.exports;
var styleElem=document.createElement("style");
styleElem.innerHTML=style;
document.head.appendChild(styleElem);
module.exports={}

以上代码均为简化代码,并不代表真是的代码
style-loader有能力避免同一个样式的重复导入