利用webpack拆分css

利用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干了什么：

1. 将css文件的内容作为字符串导出
2. 将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有能力避免同一个样式的重复导入