css-loader、style-loader、sass-loader作用

1. css-loader

https://www.webpackjs.com/loaders/css-loader/：css-loader 解释 @import 和 url() ，会 import/require() 后再解析(resolve)它们

用webpack打包就需要用到css-loader和style-loader，首先不提style-loader，只用css-loader看一下会是什么效果

webpack.cofnig.js [ rules ] 配置如下

 {
      test: /.css$/,
      loader: 'css-loader',
      exclude: /(node_modules|bower_components)/
}

public.css内容如下

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}

index.js中直接导入看下效果

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body")[0].appendChild(div);

运行结果

样式内容并没有应用到div上面，原因是css-loader只是帮我们解析了css文件里面的css代码，
默认webpack是只解析js代码的，所以想要应用样式我们要把解析完的css代码拿出来加入到
style标签中。

更改下index.js看一下css解析后的内容是什么格式的

import css from './public.css';

console.log(css);

运行结果

css-loader解析后数据格式

根据这个格式我们更改一下index.js代码

import css from './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";

let body = document.getElementsByTagName("body")[0];

let style = document.createElement("style");
style.innerText = css[0][1];

body.appendChild(style);
body.appendChild(div);

运行结果

我们发现style的样式被成功应用到div上面了，这是我们手动挂载css-loader解析的内容到style标签下，
并且将style标签加入到html文档中，但是这样手动做很麻烦，所以就有了style-loader

2. style-loader

如果你看懂我上面说的，那么你应该已经猜测到了style-loader作用了，style-loader就是帮我们
直接将css-loader解析后的内容挂载到html页面当中，通过style标签插入到html页面中-内联方式

webpack.cofnig.js [ rules ] 配置如下

{
      test: /.css$/,
      loader: 'style-loader!css-loader',
      exclude: /(node_modules|bower_components)/
}

public.css内容如下

.rect{
    background-color: red;
    width: 100px;
    height: 100px;
}

index.js内容如下

import './public.css';

let div = document.createElement("div");
div.className = "rect";
div.innerText = "hello div";
document.getElementsByTagName("body")[0].appendChild(div);

运行结果

index.js中的内容是不是清爽许多，我们不用再考虑自己挂载css-loader解析的内容了，style-loader已经帮我们这么做了，是不是很有意思。

3、sass-loader

将sass编译成css