02-初識loader，使用loader加載css

hello你們好，本節主要講解的內容是如何使用webpack加載css。

webpack 只能理解 JavaScript 和 JSON 文件。若是要使用webpack處理其餘文件，應該怎麼辦呢？這個時候咱們就須要使用loader將其餘文件處理成webpack能夠理解的文件，我打個比方，loader就像一個翻譯官同樣，將其餘語言像是英語法語西班牙語俄羅斯語等等翻譯成咱們能聽懂的漢語普通話。

那麼下面呢，我先演示一下如何使用webpack來加載css文件，

首先，安裝對應的loader：

1. css-loader
2. style-loade

執行命令行 npm install css-loader style-loader -D

等待一會安裝完畢，安裝完的時候，建立一個style.css文件寫樣式，

body{
    background-color:#369;
} 
.test{
    color:#963;
    font-size:40px;
}

而後在webpack.config.js內進行配置，告訴webpack遇到css文件應該用什麼loader來翻譯成它能夠理解的東西，loader的配置在module:{rules:[]}中寫，

test: /\\.css$/, use: [ 'style-loader', 'css-loader' ]

test對應的值，是一個字符串或正則表達式，如今這個代碼的意思是匹配到以css結尾的文件，就是css文件，當匹配到這類文件以後，使用style-loader和css-loader來處理，loader的執行順序是從上到下的，當webpack遇到css文件時先使用css-loader處理一下，而後將處理結果傳遞給style-loader，style-loader會建立一個style標籤將內容寫進去，而後把結果寫到對應的html文件內

打開index.js，引入style.css便可

import 'style.css'

而後給div添加對應的樣式

import './style.css';
function createDiv(){
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.classList.add('test');
    return div;
}
var ele = createDiv();
document.body.appendChild(ele);

演示一下，運行npm run build 查看結果，檢查元素，能夠看到對應的效果和css樣式

若是你想用css預處理語言，好比sass或less的話，須要在webpack內使用對應loader，那麼接下來我演示一下如何使用sass-loader處理scss文件

第一步仍是安裝對應的loader，npm i -D sass-loader

在安裝的時候先寫一個test-sass.scss

.scss {
    font-size: 30px;
    color: #f00;
}

安裝完成以後，打開index.js頁面，引入test-sass.scss

寫入對應的樣式

import './style.css';
import './test-sass.scss';
function createDiv(){
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.classList.add('scss');
    return div;
}
var ele = createDiv();
document.body.appendChild(ele);

演示一下