webpack中css-loader的目的是什么？

Question

我开始使用Webpack 2，我看到很多项目正在使用css-loader，但我没有找到它的目的。

Answer 1

---

编辑：在原始答案中，我描述的是style-loader而不是css-loader 。 由于css-loader只能与style-loader一起使用，因此很容易忘记这些加载器的不同用途。

---

新答案

css-loader使您可以更好地控制导入.css文件。

1.转换url(image.png) => require('./image.png')

由于现在使用了require ，因此可以使用例如file-loader或url-loader 。 现在url(image.png)可以转换为：

url(/public-path/0dcbbaa701328a3c262cfd45869e351f.png)

或者使用url-loader limit属性创建内联图片：

url(data:image/jpeg;base64,LzlqLzRBQ ... zdF3)

2.启用CSS模块

让我们考虑componentA和componentB样式：

componentA/style.css

.wrapper {
  background-color: blue;
}
.specificToComponentA {
  // rest of styles
}

componentB/style.css

.wrapper {
  background-color: red;
}
.specificToComponentB {
  // rest of styles
}

componentA看起来：

import './style.css';

export default function () {
  document.body.innerHTML = `
    <div class="wrapper">
      <div class="specificToComponentA">componentA</div>
    </div>
  `;
}

和componentB看起来：

import './style.css';

export default function () {
  document.body.innerHTML = `
    <div class="wrapper">
      <div class="specificToComponentB">componentB</div>
    </div>
  `;
}

这些组件的背景颜色是什么颜色的？ 这个问题与样式泄漏有关，很难判断它们是红色还是蓝色（很难预测样式style-loader创建的style-loader顺序）。 如果您使用CSS模块方法，您可以处理此问题。 现在将样式导入变量，此变量将包含具有映射类名称的对象：

带有CSS模块的componentA看起来：

import s from './style.css';

export default function () {
  document.body.innerHTML = `
    <div class="${s.wrapper}">
      <div class="${s.specificToComponentA}">componentA</div>
    </div>
  `;
}

s对象将包含：

{
  wrapper: "WO0HHIhH77",
  specificToComponentA: "jPYPsVTDZu"
}

componentA/style.css将被转换为

.WO0HHIhH77 {
  background-color: blue;
}
.jPYPsVTDZu {
  // rest of styles
}

和使用CSS模块的componentB看起来：

import s from './style.css';

export default function () {
  document.body.innerHTML = `
    <div class="${s.wrapper}">
      <div class="${s.specificToComponentB}">componentB</div>
    </div>
  `;
}

s对象将包含：

{
  wrapper: "C8EKTwiZfd", // Look, different than in componentA!!!
  specificToComponentB: "KI5jRsC2R5"
}

componentB/style.css将被转换为

.C8EKTwiZfd { // Look, different than in componentA!!!
  background-color: red;
}
.KI5jRsC2R5 {
  // rest of styles
}

现在，即使你不在两个组件中使用超级特定名称（如wrapper ，也可以确保它们不重叠， componentA保持蓝色， componentB保持红色。 它是封装描述为CSS模块的样式的强大功能 - 在css-loader帮助下可以实现。

OldAnswer

css-loader style-loader更改成员js和css

让我们考虑一下这个项目结构

├── components 
│   │
│   ├── componentA
│   │   ├── style.css
│   │   └── index.js
│   │
│   ├── componentB
│   │   ├── style.css
│   │   └── index.js
│   │
│   └── componentC
│       ├── style.css
│       └── index.js
│   
├── index.js  
└── index.html

index.js看起来像这样

import componentA from './components/componentA';
import componentB from './components/componentB';
import componentC from './components/componentC';

componentA();
componentB();
componentC();

1.没有css-loader样式加载器

每个*.js组件通常都是这样的

export default function () {
  // logic of this component
}

index.html包含

<link href="components/componentA/style.css" rel="stylesheet" type="text/css">
<link href="components/componentB/style.css" rel="stylesheet" type="text/css">
<link href="components/componentC/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="dist/bundle.js"></script>

现在，如果要重构代码，例如禁用componentB ，则必须将其从index.js删除

import componentA from './components/componentA';
// import componentB from './components/componentB';
import componentC from './components/componentC';

componentA();
// componentB();
componentC();

并且因为css和js是解耦的，所以你必须对index.html样式做同样的事情

<link href="components/componentA/style.css" rel="stylesheet" type="text/css">
<!-- <link href="components/componentB/style.css" rel="stylesheet" type="text/css"> -->
<link href="components/componentC/style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="dist/bundle.js"></script>

大型项目中的这种重复可能会导致死css代码 - 因为你必须在不同的地方做两件事，所以它很难维护。

注意： SASS或LESS有同样的问题。 它只从index.html移到index.sass ：

@import './components/componentA';
@import './components/componentB'; // you must disable this manually
@import './components/componentC';

2.使用css-loader样式加载器

现在你直接从它指向与某个组件相关的样式（不是在1. point中的单独位置）例如你的*.js组件看起来像

import './style.css';

export default function () {
  // logic of this component
}

和index.html

<script type="text/javascript" src="dist/bundle.js"></script>

最重要的是，如果你有这个架构并想要禁用componentB ，那么你所做的只是

import componentA from './components/componentA';
// import componentB from './components/componentB';
import componentC from './components/componentC';

componentA();
// componentB();
componentC();

这就是全部！ 不再需要在任何.html或.sass或.less查找样式componentB/style.css引用。 如果要添加新组件，也是如此：只需导入.js文件即可添加js逻辑和css样式。 这更容易维护！

Answer 2

在.js文件中， ES6 import或CommonJS的require()允许您只将JavaScript文件（模块）导入其中。 因此，当您通过import from './styles.css'包含styles.css ，例如，在.js文件中时，您需要首先转换为.js 。 这里是css-loader来救援的地方。