（4）webpack中配置css，scss，less第三方loader

為什么要使用第三方loader

一般引入樣式文件，我們會在html中引入樣式標簽。

很明顯，這樣就跟之前在script中引入js文件一樣，會導致二次請求。我們希望webpack像處理js文件一樣處理樣式文件。

如何引入樣式

於是我們在入口文件，在main.js中通過import方式引入樣式文件。

如何配置css-loader

引入完成后，我們通過npm run dev運行項目會發現，webpack報錯如下：

提示：沒有合適的loader來解析這種類型的文件
注意：

1. webpack默認只能打包處理js類型的文件，無法處理其他的非js類型的文件
2. 如果要處理非js類型的文件，我們需要手動安裝一些合適的第三方loader加載器

解決問題：

1. 安裝合適的loader來解析css樣式文件，cnpm install style-loader css-loader -D
2. 打開webpack..config.js文件，在里面新增一個配置節點，叫做module，它是一個對象，在這個module對象身上有個rules屬性，這個rules屬性是個數組；這個數組中存放了所有第三方文件的匹配和處理規則
   

注意：webpack處理第三方文件類型的過程

1. 發現這個要處理的文件不是js文件，就會去配置文件中查找有沒有對應的第三方loader規則
2. 如果能找到對應的規則，就會調用對應的loader處理這種文件類型
3. 在調用loader的時候，是從后往前調用的，所以style-loader要寫在css-loader的前面
4. 當最后的一個loader調用完畢，會把處理的結果，直接交給webpack進行打包合並，最終輸出到bundle.js中去

保存所有文件，執行npm run dev即可看到樣式已經被webpack打包更新。

如何配置less-loader

大致內容基本上同配置css-loader相同。

1. 引入index.less樣式
   

2. 安裝less-loader依賴cnpm install less-loader -D

3. 安裝完成之后，控制台警告，提示less依賴，安裝less
   

4. 安裝依賴 cnpm install less -D

5. 配置webpack.config.js文件中的moudle
   

6. 保存所有文件，執行npm run dev即可看到樣式已經被webpack打包更新。

如何配置scss-loader

大致內容基本上同配置less-loader相同。

1. 引入index.scss樣式
   
2. 安裝less-loader依賴cnpm install sass-loader -D
3. 安裝完成之后，控制台警告，提示node-sass依賴，雖然警告了三個，但是我只安裝node-sass依然正常。
   
4. 安裝依賴 cnpm install node-sass -D
5. 配置webpack.config.js文件中的moudle
   
6. 保存所有文件，執行npm run dev即可看到樣式已經被webpack打包更新。