注意 loader配置好以后，是按照從下到上，從右到左的配置順序執(zhí)行的。

假如有一個(gè)index.css文件，里邊內(nèi)容是這樣的

.avatar {
    width:150px;
    height:150px;
}

然后，我把這個(gè)css文件引入JS文件

image.png

這個(gè)時(shí)候，如果我直接去打包，會(huì)報(bào)錯(cuò)，因?yàn)閣ebpack默認(rèn)不知道怎么打包c(diǎn)ss結(jié)尾的文件，所以我們需要配置相關(guān)的loader告訴webpack如何去打包c(diǎn)ss結(jié)尾的文件；

打包c(diǎn)ss文件，需要用到 style-loader css-loader兩個(gè)loader(配置好以后，記得安裝loader，否則會(huì)報(bào)錯(cuò))

image.png

當(dāng)我們配置好也安裝好了這兩個(gè)loader以后。再去打包，就會(huì)打包成功了，頁(yè)面上的圖片也變成了寬高150px;

那么這個(gè)打包流程是什么樣子的呢？

1. 首先，我引入了一個(gè) css文件，正常情況下，webpack不知道如何打包c(diǎn)ss文件
2. 然后，我們配置了css-loader和style-loader告訴它如何去打包c(diǎn)ss文件
3. 當(dāng)我們打包好以后，我們的JS文件里，就有了樣式相關(guān)的內(nèi)容，然后我們又給img標(biāo)簽添加了class名，樣式有了，class名也添加了，頁(yè)面上的img圖片就會(huì)變成150寬高

那么 style-loader css-loader兩個(gè)loader的作用分別是什么呢？

我們可以稍微改造下剛才的樣式文件，我們新增一個(gè) avatar.css文件，里邊內(nèi)容這樣

.avatar {
    width:150px;
    height:150px;
}

然后，我們?cè)僭?index.css里引入 avatar.css

@import './ avatar.css'

然后我們?cè)僦匦麓虬?yè)面效果更剛才一樣，那么這個(gè)過(guò)程中，css-loader起了什么作用呢？它幫我們分析出幾個(gè)css文件之間的關(guān)系，最終把幾個(gè)css文件合并成一段css.
那么style-loader它的作用就是，在得到 css-loader生成的 css內(nèi)容之后，把這部分內(nèi)容，掛載到頁(yè)面的 heade部分

image.png

但是，很多時(shí)候，我們寫樣式，并不是用css文件，而是sass,less,或者stylus這種新寫法，這個(gè)時(shí)候如果還是單純的用 style-loader css-loader 就不行了，我們需要新增配置

• 比如。當(dāng)我們的樣式文件是 scss后綴的時(shí)候，我們就需要配置 sass-loader,安裝方式：

 npm install sass-loader node-sass  --save-dev

配置

image.png

然后，我們?cè)俅虬?，就?huì)發(fā)現(xiàn)圖片樣式就是 150px寬高。

自動(dòng)加廠商前綴，有時(shí)候，當(dāng)我們寫CSS3樣式的時(shí)候，為了兼容性，一般會(huì)加廠商前綴，比如

-webkit
-moz
-ms
-o

但是如果手寫廠商前綴，會(huì)比較麻煩，我們可以利用一個(gè)loader來(lái)自動(dòng)幫我們添加廠商前綴，那就是 postcss-loader

使用這個(gè)loader的步驟

1. 安裝 npm i -D postcss-loader

2. 配置

   
   
   image.png
3. 創(chuàng)建新的JS文件 postcss.config.js
4. 配置JS文件 postcss.config.js，配置的時(shí)候，需要用到 autoprefixer這個(gè)插件，所以需要安裝這個(gè)插件

 npm install autoprefixer -D

安裝后， postcss.config.js 這樣配置

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

做好了配置以后，我們?cè)偃ゴ虬?，然后打開(kāi)頁(yè)面會(huì)發(fā)現(xiàn) , postcss這個(gè)loader里的 autoprefixer這個(gè)插件 已經(jīng)自動(dòng)幫我們添加了帶有廠商前綴的 偏移樣式

image.png