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);

演示一下