1. css-loader
用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页面当中，我们来看一下
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已经
帮我们这么做了，是不是很有意思。
