一文大白话讲清楚webpack基本使用——2——css相关loader的配置和使用
1. 建议按文章顺序从头看是看
- 第一篇：
- 一文大白话讲清楚啥是个webpack
- 第二篇：
- 一文大白话讲清楚webpack基本使用——1——完成webpack的初步构建
- 然后看本篇，Loader的配置和使用
2. Loader的配置和使用
- 上一篇文章我们完成了基本的webpack构建，让index.html和main.js关联起来，并成功的在浏览器里面运行了index.html,控制台打印出来了5
- 这篇讲Loader，先简单回忆一下，Loader的作用就是把非js模块的文件进行转换和处理，以便于webpack能对其像js模块那样完成构建打包
- 那我们先讲啥呢，当然是CSS，HTML+CSS+javascript那是绝配么
- 我们上节写了html和js，但没写css，现在我们想加上css样式
- 我们在src目录下新建一个文件夹stylesheet，用来存放我们的css文件，然后里面创建一个index.css
2.1 css-loader
- 假设我们希望在index.html上插入一个p标签，给p标签挂上一个class,名字叫’p-loader-css’，设置p标签的字体和颜色
- 于是我们在index.css里面写样式
.p-loader-css{
font-size:18px;
color:red
}
- 定义好样式后，我们在main.js里面创建p标签，并挂在样式
import './stylesheet/index.css'
let p=document.createElement('p')
p.className='p-loader-css'
p.textContent='我是p标签的样式，通过loader处理后被构建'
document.body.appendChild(p)//把p标签插入body里面
- 这样就完成了p标签的创建和样式添加
- 我们老规矩，npm运行一下
npm run build
-
我们可以看到，终端报了一个错误
-
大概意思就是模块转换失败，你可能需要一个loader来处理这类型的文件，目前没有这样的loader可以处理这样的文件，不过好在最后还是打包了，我们运行了一下再说
-
可以发现也是报了同样的错误
-
为什么呢，因为我们说了，webpack只能对js模块进行构建处理，css模块搞不了，所以需要一个loader来协助处理，那就是css loader
-
css-loader主要处理样式文件中的import和url等语句，不负责将样式注入到HTML页面中，干这个活的另有他人，就是style-loader,负责把转换后的css模块注入到HTMl页面中
-
所以我们现在需要两个loader来处理上述的问题
-
先安装
npm install css-loader style-loader
- 然后再webpack.config.js里面配置loader
module:{//要处理的模块
roules:[//不同的规则处理不同的文件，所以是一个数组，每个数组的元素是一个规则对象
{
test:/\.css$/,//匹配后缀为css的文件，匹配到是使用这条处理规则
use:['style-loader','css-loader']//这里有点类似函数式编程，从后往前加载执行
}
]
}
- 配置完我们再次构建
npm run build
-
发现构建成拱了，我们在浏览器里面运行一下index.html
-
发现css样式添加进来了
-
OK
-
但是有些情况下我们在开发的时候使用了css预编译语言怎么办呢，不懂预编译语言的，看我这篇文章一文大白话讲清楚CSS预编译语言,包括Sass,Scss,Less,Stylus
-
没关系，就是再多一个loader的事，假设我们用了scss吧，那就是先把Scss用scss-loader转css，然后用css-loader将css处理，在通过style-loader注入
2.2 sass-Loader
- 那好，我们在stylesheet目前下新建一个index.scss文件,为刚才的p标签加上红色的边框
$color:red;
.p-border{
border:2px solid $color;
}
- 然后再main.js里面引入index.scss,并给p标签挂载类
import './stylesheet/index.scss'
p.classList.add('p-border')
- 然后下载scss-loader和sass
npm install sass-loader sass
- 然后再webpack.config.js里面配置scss-loader
module:{//要处理的模块
roules:[//不同的规则处理不同的文件，所以是一个数组，每个数组的元素是一个规则对象
{
test:/\.css$/,//匹配后缀为css的文件，匹配到是使用这条处理规则
use:['style-loader','css-loader']//这里有点类似函数式编程，从后往前加载执行
},
{
test:/\.scss$/,//匹配后缀为scss的文件
use:['style-loader','css-loader','sass-loader']
}
]
}
- 配置完我们再次构建
npm run build
-
允许index.html,发现边框加上了
-
这就OK了
-
这还有一个问题，就是有时候css3的新属性在一些浏览器上不支持，我们需要加一下前缀保证兼容性，比如加上-webkit-这样的前缀。我们这就需要另外一个postcss-loader和postcss-preset-env
2.3 postcss-Loader和postcss-preset-env
- 我们安装
npm install postcss-loader postcss-preset-env
- 然后进行配置
{
test:/\.scss$/,//匹配后缀为scss的文件
use:['style-loader','css-loader','sass-loader',{
loader:'postcss-loader',
options:{
postcssOptions:{
plugins:[
['postcss-preset-env']
]
}
}
}]
}
