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已經
幫我們這么做了，是不是很有意思。