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