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)

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

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).如果您使用CSS模块方法,您可以处理此问题.现在将样式导入变量,此变量将包含具有映射类名称的对象:

componentA 使用CSS Modules看起来:

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
}

和componentBCSS模块看起来:

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();

这就是全部!不再寻找componentB/style.css任何.html或.sass或任何风格的参考.less.如果要添加新组件,情况也是如此:只需导入.js文件即可添加js logic和css样式.这更容易维护!