css-loader和style-loader關系原理及作用

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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • webpack使用學習 本分享學習借鑒webpack中文官網,官網鏈接(中文文檔):https://www.web...
    腿毛怪丶叔叔閱讀 896評論 0 5
  • 在現在的前端開發中,前后端分離、模塊化開發、版本控制、文件合并與壓縮、mock數據等等一些原本后端的思想開始...
    Charlot閱讀 5,483評論 1 32
  • webpack 是什么? 本質上,webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(mo...
    IT老馬閱讀 3,341評論 2 27
  • 1. 新建一個文件夾,命名為 webpack-cli , webpack-cli 就是你的項目名,項目名建議使用小...
    魯大師666閱讀 1,500評論 1 3
  • preprocessing operations common operations for the three ...
    榆鴉k閱讀 242評論 0 0