css 工程化👉 利用 webpack 解析 css

2022-10-18 | 2024-05-28 | 606 | 2 分钟

要拆分 css 就必须把 css 当成像 js 那样的模块；要把 css 当成模块，就必须有一个构建工具（webpack），它具备合并代码的能力，而 webpack 本身只能读取 css 文件的内容并将其当作 JS 代码进行分析，因此，会导致错误；

于是就必须有一个 loader 能够将 css 代码转换为 js 代码；

css-loader

将 css 文件的内容作为字符串导出；

将 css 中的其他依赖作为 require 导入，以便 webpack 分析依赖；

处理普通 css

css-loader 的作用，就是将 css 代码转换为 js 代码，它的处理原理极其简单：将 css 代码作为字符串导出
```
.red {
    color: #f40;
}
```
经过 css-loader 转换后变成 js 代码 （下面的 js 代码是经过简化，不代表真实的 css-loader 的转换后代码，css-loader 转换后的代码会有些复杂，同时会导出更多的信息，但核心思想不变）：
```
module.exports = `.red {
    color: #f40;
}`
```

处理 css 中的图片资源

再例如：

.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}");
}`;

处理 css 中导入的 css

再例如：

@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}");
}`;

style-loader

由于 css-loader 仅提供了将 css 转换为字符串导出的能力，剩余的事情要交给其他 loader 或 plugin 来处理；
style-loader 可以将 css-loader 转换后的代码进一步处理，将 css-loader 导出的字符串加入到页面的 style 元素中 （以上代码均为简化后的代码，并不代表真实的代码，style-loader 有能力避免同一个样式的重复导入），例如：
```
.red {
    color: #f40;
}
```

经过 css-loader 转换后变成 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);

打赏作者

您的打赏是我前进的动力

微信

支付宝

vue-router📝 路由组件传参

vue-router📝 嵌套路由

中午好👏🏻，我是 ✍🏻 疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

1. css-loader
2. style-loader