css-loader的作用

css-loader 是一个非常关键的 Webpack loader，它主要用于处理 CSS 文件。css-loader 的作用不仅仅是加载 CSS 文件，还包括解析其中的 URL() 和 @import 语句，并解决它们所引用的资源的依赖关系。这样做使得 Webpack 能够处理 CSS 文件中引用的其他资源，如图片、字体等，并且可以将这些资源包含到 Webpack 的打包过程中。

具体功能

1. 解析 @import 和 URL() ： css-loader 会解析 CSS 文件中的 @import 语句和 url() 函数。这是非常重要的，因为它允许 Webpack 跟踪到 CSS 文件依赖的其他文件或资源，例如其他的 CSS 文件、图片、字体文件等。

2. 模块化支持： css-loader 支持 CSS 模块化。这意味着你可以将 CSS 样式作为模块引入到 JavaScript 文件中，通过 JavaScript 动态地操作样式。这在使用组件化框架如 React 时非常有用，因为它允许你将样式封装到组件中，避免全局样式污染。

3. 局部作用域和模块化的 CSS： 当使用 CSS Modules 功能时，css-loader 会自动将类名和其他的选择器转换为唯一的标识符。这样做可以确保样式只应用于加载它们的那部分 HTML，不会影响到全局的样式。

处理 url()

对于CSS中的url()函数，css-loader的处理方式是将里面引用的资源（如图片、字体文件等）视为模块依赖：

• css-loader会分析url()中的路径，并将这些资源当作模块请求。
• 这些资源可以被Webpack的其他loader处理，例如file-loader或url-loader。file-loader可以将资源文件输出到构建目录，并返回最终路径；url-loader可以将小文件转换为Base64编码，直接嵌入到CSS中。
• 此过程确保所有资源都可以被Webpack正确地打包和引用，资源的最终URL将根据Webpack的输出配置进行更新。

案例

/* style.css */
.body {
  background-color: blue;
}

使用 css-loader 处理后，这段 CSS 可能被转换成如下 JavaScript 代码：

// 由 css-loader 生成的 JavaScript 模块代码
var css = ".body { background-color: blue; }";
export default css;

---

/* style.css */
@import "reset.css";
.background {
  background-image: url('./images/bg.jpg');
}

使用了 css-loader、style-loader 以及 url-loader，转换后的 JavaScript 模块可能类似于：

import './reset.css';
const style = document.createElement('style');
style.innerHTML = `
  .background {
    background-image: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAA...); // 这里是 bg.jpg 的 Base64 编码
  }
`;
document.head.appendChild(style);