利用webpack拆分css
要拆分css,就必须把css当成象js那样的模块, 就必须有一个构建工具(webpack),它具备合并代码的能力
而webpack本身只能读取css文件的内容, 将其当做js代码进行分析,因此,会导致错误
于是,就必须有一个loader,能够将css代码转换为js代码
css-loader
css-loader的作用,就是将css代码转换为js代码,他的处理原理及其简单:将css代码作为字符串导出
安装 npm i -D css-loader
例如:
.red{
color:"#f40";
}
经过css-loader转换后变成js代码:
module.exports = `.red{
color:"#f40";
}`
那么我们的webpack.config.js 是这样配置的
module.exports = {
mode:"development",
devtool:"source-map",
module:{
rules:[
{test:/\.css$/,use:"css-loader"}//规则 当遇到.css结尾的文件,交给css-loader处理
]
}
}
上面的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/bg.png");
module.exports = `.red{
color:"#f40";
background:url("${import1}")
}`;
再例如:
@import "./reset.css";
.red{
color:"#f40";
background:url("./bg.png")
}
会转换为:
var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `${import1}
.red{
color:"#f40";
background:url("${import2}")
}`;
如果有图片时,那么需要配置
{test:/\.png$/,use:"file-loader"}//file-loader返回的是一个文件路径
webpack.config.js配置
module.exports = {
mode:"development",
devtool:"source-map",
module:{
rules:[
{test:/\.css$/,use:"css-loader"},//规则 当遇到.css结尾的文件,交给css-loader处理
{test:/\.png$/,use:"file-loader"}//file-loader返回的是一个文件路径
]
}
}
当我们打印输出index.js 所导入的css文件时
var result = require("./assets/banner.css");
console.log(result);
console.log(result.toString());
由此可见 我们result.toString()后的结果是编译后的css样式
那么 我们 可以这样练习,把样式显示出来
var result = require("./assets/banner.css");
console.log(result);
console.log(result.toString());
var css = result.toString();
var style = document.createElement("style");
style.innerHTML = css;
document.head.appendChild(style)
console.log(css);
总结,css
-loader干了什么:
- 将css文件的内容作为字符串导出
- 将css中的其他依赖作为require导入,以便webpack分析依赖
style-loader
由于css-loader仅提供了将css转换为字符串导出的能力,剩余的事情要交给其他loader或plugin来处理
style-loader可以将css-loader转换后的代码进一步处理,将css-loader导出的字符串加入到页面的style元素中
webpack.config.js配置
module.exports = {
mode:"development",
devtool:"source-map",
module:{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]},//规则 当遇到.css结尾的文件,先交给css-loader处理,在交给syle-loader
{test:/\.png$/,use:"file-loader"}//file-loader返回的是一个文件路径
]
}
}
例如:css
.red{
color:"#f40";
}
经过css-loader转换后变成js代码:
```js
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有能力避免同一个样式的重复导入