新答案

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的限制属性创建内嵌图片：

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

<强> 2。启用CSS Modules

让我们考虑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创建的样式的顺序）。如果您使用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 样式加载器更改成员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.点的单独位置）例如，您的*.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();

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

Answer 2

在Command: selectPopUp Target: Value: Your popUp title文件中 ES6 .js或 CommonJS 的import允许您只导入JavaScript文件（模块）它。因此，当您通过require()在styles.css文件中添加.js时，您首先需要转换为import from './styles.css'。这里有 css-loader 来救援。

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

2 个答案:

新答案

OldAnswer

css-loader 样式加载器更改成员js和css